html - 设置溢出时框阴影消失

Question

参考这个jsfiddle：https ://jsfiddle.net/2crwskzt/

我有一张桌子，我在 tbody 上将 overflow-y 设置为 auto。但不知何故这样做会使盒子左右两边的盒子阴影消失。为什么会发生这种情况以及如何解决这个问题？

html:

<table class="scroll">
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
            <th>Head 3</th>
            <th>Head 4</th>
            <th>Head 5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Content 1</td>
            <td>Content 2</td>
            <td>Content 3</td>
            <td>Content 4</td>
            <td>Content 5</td>
        </tr>
        ...
    </tbody>
</table>

CSS：

table.scroll {
    width: 100%; /* Optional */
    border-spacing: 0;
}

table.scroll tbody,
table.scroll thead { display: block; }

thead tr th { 
    height: 30px;
    line-height: 30px;
    /*text-align: left;*/
}

table.scroll tbody {
    height: 100px;
    overflow-y: auto;
}

tbody { border-top: 2px solid black; }

tbody td, thead th {
    width: 20%; /* Optional */
    box-shadow: 2px 2px 5px red
}

tbody td:last-child, thead th:last-child {
    border-right: none;
}

标签： htmlcssoverflow