表格行上的CSS框阴影(tr)似乎不能在浏览器之间保持一致。在某些浏览器上显示阴影;在别人身上，没有阴影。
我正在使用以下CSS：
tr {
background-color: rgb(165,182,229);
Box-shadow: 0px 2px 2px black;
-moz-Box-shadow: 0px 2px 2px black;
-webkit-Box-shadow: 0px 2px 2px black;
}
td,th {
padding: 5px;
text-align: left;
}
tr {
background-color: rgb(165,229);
Box-shadow: 0px 2px 2px black;
-moz-Box-shadow: 0px 2px 2px black,;
-webkit-Box-shadow: 0px 2px 2px black;
}
td,th {
padding: 5px;
text-align: left;
}
<table>
<tr>
<td> </td>
<th>One</th>
<th>Two</th>
</tr>
<tr>
<th>Title</th>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<th>Title2</th>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<th>Title3</th>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<th>Title4</th>
<td>Nine</td>
<td>Ten</td>
</tr>
</table>
注意：当代替< tr>时，观察到相同的行为。与< div>并添加display：table-row。
解决方法
如前所述，Box-shadow属性仅适用于显示：block或display：inline-block属性的元素。
如果要将table：block添加到表单元格中作为一般样式规则，则它将折叠，因为单元格与display：table的自动宽度/高度比例将不再被应用。为了模拟这种行为，只需将min-width属性分配给每个th和td。
然后将Box-shadow应用于行(悬停或不存在)。
总而言之，您的代码应如下所示：
table { Box-sizing: border-Box; }
td,th { padding-left: 16px; min-width: 170px; text-align: left; }
tr { display: block; }
tr:hover { Box-shadow: 0px 2px 18px 0px rgba(0,0.5); cursor: pointer; }
为了简单起见，我省略了供应商的前缀。
这里是完整的例子：
table {
Box-sizing: border-Box;
border-bottom: 1px solid #e8e8e8;
}
td,th {
padding-left: 16px;
min-width: 170px;
border: 1px solid #e8e8e8;
border-bottom: none;
font: 14px/40px;
text-align: left;
}
td {
color: #666;
}
tr {
display: block;
}
th {
color: #333;
}
tr:hover {
background-color: #fbfbfb;
Box-shadow: 0px 2px 18px 0px rgba(0,0.5);
cursor: pointer;
}
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Phone number</th>
<th>Date</th>
<th>Name</th>
<th>Label</th>
</tr>
</thead>
<tbody>
<tr>
<td>0342443</td>
<td>10 August 2013</td>
<td>Kate</td>
<td>Loves cats</td>
</td>
<tr>
<td>0342442</td>
<td>9 August 2013</td>
<td>Mary</td>
<td>Boring</td>
</tr>
<tr>
<td>0342441</td>
<td>8 August 2013</td>
<td>Anna</td>
<td>Loves extreme stuff</td>
</tr>
</tbody>
</table>
