我试图在html表的某些列组上放置一些 html： css： 实际外观： 想要的表情：
这是一种黑客，但它的结果类似于你想要的。 我为每个 逻辑是有一个 所以层是 null框影,但我在每个上都得到了框影的覆盖。（在我的上下文中，我不能拆表） <table>
<tr>
<td>test</td>
<td>test</td>
<td class="transparent"></td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td class="transparent"></td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td class="transparent"></td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>
table {
margin: 50px;
border-collapse: collapse;
}
td:not(.transparent) {
padding: 2em;
box-shadow: 0 8px 24px rgba(128, 128, 128, .15);
}
td.transparent {
padding: 1em;
}
共1个答案
匿名用户
TD添加了span。:before元素，用白色(background)覆盖内部的td空间。span意味着将文本提前一层。
td)z-index:0
:before)Z-index:1
span)z-index:2table {
margin: 50px;
border-collapse: collapse;
}
td {
padding: 2em;
position: relative;
}
td:not(.transparent) {
box-shadow: 0 8px 24px rgba(128, 128, 128, .15);
}
td:not(.transparent):before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 1;
}
td:not(.transparent) span {
position: relative;
z-index: 2;
}
td.transparent {
padding: 1em;
}<table>
<tr>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
<td class="transparent"></td>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
</tr>
<tr>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
<td class="transparent"></td>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
</tr>
<tr>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
<td class="transparent"></td>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
<td>
<span>test</span>
</td>
</tr>
</table>
相关问题
