Как сделать так, чтобы box-shadow у tr наслаивалось на следующий tr в таблице?

Question

[Амир]

Здравствуйте.
В общем, есть таблица:

<table>
            <thead>
                <tr>
                    <th>One</th>
                    <th>Two</th>
                    <th>Three</th>
                    <th>Four</th>
                    <th>Five</th>
                    <th>Six</th>
                    <th>Seven</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                </tr>
        </tbody>
    </table>

body {
    margin: 0;
    background: #eee;
}

table {
    width: calc(100% - 40px);
    margin: 40px 20px;
    border-collapse: separate;
    border-spacing: 0 10px;
}

table tbody tr {
    cursor: pointer;
    border-radius: 10px;
}

table tbody tr:hover {
    box-shadow: 0 12px 10px 0 rgba(0,0,0,0.15);
}

table tbody tr td {
    background-color: #fff;
    padding: 10px 20px;
}

table tbody tr > td:first-child {
    border-radius: 10px 0 0 10px;
}

table tbody tr > td:last-child {
    border-radius: 0 10px 10px 0;
}

При наведении на строку, появляется тень, которая скрывается за следующей строкой. А мне необходимо, чтобы она была как бы сверху следующей строки. Помогите пожалуйста решить проблему.

Заранее благодарен.

Answer 1

[kreoTech]

Надо добавить z-index:
https://jsfiddle.net/kreoTech/74qcu8gt/

Comments

[Амир]

Посмотрите внимательно. Не получается (для наглядности попробуйте box-shadow: 0 12px 10px 0 rgba(0,0,0,1);

[kreoTech]

Амир, у меня все нормально отображается - https://c2n.me/3S54n5y

Или требуется уточнение вопроса, или возможно баги браузера, в котором вы смотрите пример.

[Амир]

kreotech, я думаю, Вы проверяете в Firefox (у меня тоже там всё в порядке). В Chrome, Edge такого эффекта нет (z-index не влияет).

[kreoTech]

Амир, немного доработки: https://jsfiddle.net/kreoTech/74qcu8gt/9/

td перекрывали. Им тоже z-index добавил. Думаю должно корректно отображаться везде. В хроме работает.

[Амир]

kreotech, спасибо