在CSS中添加box-shadow到tbody? [英] Add box-shadow to tbody in CSS?
问题描述
我想重新创建一个Photoshop模型中的材料设计表:
I am trying to recreate this material design table I made in a Photoshop mockup:
除了一个阴影,我有我想要的一切。当我对tbody元素应用阴影时,它显示在Firefox中,但不是Chrome或Edge。如果我将一个display:block样式应用到它,它会显示。但是,这会删除默认的display:table-row-group样式,从而有效地破坏表的结构。我如何添加一个阴影而不影响布局的其余部分?
I've got everything I want except for a drop shadow. When I apply a drop shadow to the tbody element, it shows in Firefox, but not Chrome or Edge.If I apply a "display: block" style to it as well, it will show. However, this removes the default "display: table-row-group" style, effectively ruining the structure of the table. How can I add a drop shadow without affecting the rest of the layout?
* {
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 2px 10px 0 rgba(0,0,0,0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
}
.grey {
opacity: .5;
}
.green {
color: #4caf50;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>You</td>
<td>Today, 4:12 PM</td>
<td class="green">92%</td>
</tr>
<tr>
<td>John Smith</td>
<td>Today, 3:28 PM</td>
<td class="grey">Hidden</td>
</tr>
<tr>
<td>Bobby Newport</td>
<td>Yesterday</td>
<td class="grey">Hidden</td>
</tr>
<tr>
<td>Jim Halpert</td>
<td>2 days ago</td>
<td class="grey">Hidden</td>
</tr>
<tr>
<td>Detlow Coffin</td>
<td>2 days ago</td>
<td class="grey">Hidden</td>
</tr>
</tbody>
</table>
推荐答案
我花了几个小时在这个问题,终于一个工作的解决方案,不打破表布局。但现在我想到了flexbox可能会更简单...
I spent a few hours on this issue and have finally a working solution that doesn't break the table layout. But now that I think about it flexbox would probably be much simpler...
table {
position: relative;
}
table:after {
content: '';
position: absolute;
box-shadow: 0 2px 4px 0 rgba(37, 37, 37, 0.2); // your box-shadow
left: 0;
right: 0;
top: 36px; // height of your table header
bottom: 0;
z-index: -1;
}
这里是小提琴: https://jsfiddle.net/jitowix/o2gx7sc4/
这篇关于在CSS中添加box-shadow到tbody?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!