我有一个有趣的问题是在第一列td
隐身(display:none
)中添加边框。
我无法仅使用border:none;
方选择first-child
添加border-left
的可见单元格。将hidden
添加到行的第一个子节点也不起作用。
table{
border-collapse:collapse;
}
.a {
border:1px solid #f00;
}
table .td-hide{
display:none;
}
table tr{
border-bottom:1px solid #000;
}
table td{
border-left:1px solid #000;
}
table td:not([style*="display:none"]):first-child{
border:0;
}

<div class='a'>
<table>
<tr>
<td class='td-hide'>
</td>
<td>name 1</td>
<td>name 2</td>
</tr>
<tr>
<td class='td-hide'></td>
<td>name 1</td>
<td>name 2</td>
</tr>
</table>
</div>
&#13;
答案 0 :(得分:0)
答案 1 :(得分:0)
此CSS删除了最后一个<tr>
的底部边框
table tr:not(:last-child) {
border-bottom: 1px solid #000;
}
此CSS删除了第一个<td>
上的左边框,
table td:not(:last-child) {
border-right: 1px solid #000;
}
结果如下:
table {
border-collapse: collapse;
}
.a {
border: 1px solid #f00;
}
table .td-hide {
display: none;
}
table tr:not(:last-child) {
border-bottom: 1px solid #000;
}
table td:not(:last-child) {
border-right: 1px solid #000;
}
<div class='a'>
<table>
<tr>
<td class='td-hide'>
</td>
<td>
name 1
</td>
<td>
name 2
</td>
</tr>
<tr>
<td class='td-hide'>
</td>
<td>
name 1
</td>
<td>
name 2
</td>
</tr>
<tr>
<td class='td-hide'>
</td>
<td>
name 1
</td>
<td>
name 2
</td>
</tr>
</table>
</div>