Question

我创建了这个very simple fiddle来重现这个问题。我做的是firefox中的预期，但不是chrome。是否有解决方法来达到同样的目的？

以下是HTML代码：

<table  cellpadding="1">
    <thead>
        <tr>
            <th>Adskldj</th>
            <th>dfsdfd</th>
        </tr>
    </thead>
    <tbody>
        <tr><th>Adskldj</th><th>dfsdfd</th></tr>
        <tr><th>Adskldj</th><th>dfsdfd</th></tr>
        <tr><th>Adskldj</th><th>dfsdfd</th></tr>
        <tr><th>Adskldj</th><th>dfsdfd</th></tr>
    </tbody>
</table>

和CSS

table {
    border-collapse:collapse;
}
td, th {
    border-top: 1px solid #888;
    border-bottom: 1px solid #888;
    padding: 30px;
}
thead {
    background-color: #DDD;
    box-shadow:inset 0 0 10px #000000;
}

Answer 1

我认为box-shadow需要在块级元素上。因此它没有在thead上工作。

我试图找到规格，但仍然。块级别。

Answer 2

我通过绕过表格标签并使用css显示属性来成功使用CSS3花式，为每个原生table-element创建一个类并将其应用于＆lt; div＆gt;或其他元素。

CSS如：

.row{
    display:table-row;
}
.cell{
    display:table-cell;
}

等

这允许使用常规表格无法实现的一些好效果。

如何在chrome中对thead进行嵌入式阴影效果？

2 个答案: