如前所述，
box-shadow属性仅适用于具有
display: block或
display:inline-block属性的元素。
如果您将
display: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,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, 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>
