相关疑难解决方法(0)
在 CSS 中将 box-shadow 添加到 tbody 中？
我正在尝试重新创建我在 Photoshop 模型中制作的这个材料设计表：
除了阴影之外，我已经得到了我想要的一切。当我对 tbody 元素应用阴影时，它会在 Firefox 中显示，但不会在 Chrome 或 Edge 中显示。如果我也对其应用“display: block”样式，它也会显示。但是，这会删除默认的“display: table-row-group”样式，从而有效地破坏了表的结构。如何添加阴影而不影响布局的其余部分？
* {
font-family: Roboto, Arial;
}
body {
background: #f8f8f8;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
font-weight: normal;
opacity: .7;
text-align: left;
padding-left: 20px;
padding-bottom: 10px;
}
td {
padding: 20px;
}
tbody tr:nth-child(even) {
background: rgba(128,128,128,.05);
}
tbody {
background: #fff;
/* This doesn't work unless "display: block" is applied, which ruins the structure */
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 …2
推荐指数
推荐指数
1
解决办法
解决办法
1764
查看次数
查看次数