Guedda
@Guedda
Начинающий front-end разработчик

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

Здравствуйте.
В общем, есть таблица:
<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;
}

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

Заранее благодарен.
  • Вопрос задан
  • 68 просмотров
Решения вопроса 1
kreotech
@kreotech
Абстрактно-ориентированный программист
Надо добавить z-index:
https://jsfiddle.net/kreoTech/74qcu8gt/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Biganto Москва
от 130 000 до 130 000 руб.
Soft Media Int. Пенза
от 125 000 до 225 000 руб.
от 120 000 до 150 000 руб.
19 авг. 2018, в 00:49
600 руб./в час
18 авг. 2018, в 17:54
6000 руб./за проект
18 авг. 2018, в 16:00
60000 руб./за проект