我有一个简单的表格,带有box-shadow
,但我想从任何阴影中排除第一个单元格。
我已经尝试添加box-shadow: none
到该单元格,但它不会覆盖整个表格上的阴影。我什至不确定这是否可能?
HTML:
<table>
<tr class="header">
<td></td>
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
<tr>
<td>row 1</td>
<td>row 1</td>
<td>row 1</td>
<td>row 1</td>
</tr>
<tr>
<td>row 2</td>
<td>row 2</td>
<td>row 2</td>
<td>row 2</td>
</tr>
<tr class="last-row">
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
<td>row 3</td>
</tr>
</table>
CSS:
table {
width: 80%;
margin: 30px;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.header {
height: 50px;
vertical-align: middle;
text-align: center;
color: #fff;
background: red;
}
.header td {
border-bottom: 2px solid #ccc;
}
.header td:first-of-type {
background: #fff;
}
.last-row td {
border: none !important;
}
tr td:not(.header) {
height: 60px;
text-align: center;
border-bottom: 1px solid #ccc;
}
这可能吗?
更新
我所说的第一个单元格是指与班级一起排的第一个单元格header
-table .header td {}
这是完美结果的图像: