我有一个动态表,根据用户事件,表的行数会发生变化。我的tr
而不是.selected
的{{1}}设置为display:none;
- 并且完全有可能没有表格行。当我设置display:none
时,除了原始第一行有类selected
之外,问题是表标题消失了。换句话说,仅当选择第一行时才会出现标题。我认为这是有道理的,但是在处理display:none;
时有没有办法解决这个问题?我希望表头始终可见,无论隐藏哪些行。
tr:not(.selected) {
display:none;
}
我尝试添加not(:first-child)
这样的内容,但都没有效果。我使用这种方法是在正确的轨道上吗?我认为动态添加和删除行会涉及太多的迭代或减慢速度。
答案 0 :(得分:1)
首先,不需要not
之后的冒号,所以删除它:
tr:not(.selected) {
display: none;
}
至于仅隐藏没有.selected
类的数据行(而不是标题行),有几种方法可以实现这一点。我建议您使用<thead>
和<tbody>
分割您的表格:
<table>
<thead>
<tr>
<th>
Heading 1
</th>
<th>
Heading 2
</th>
<th>
....
</th>
</tr>
</thead>
<tbody>
<tr>
<!-- your data here -->
</tr>
</tbody>
</table>
然后您可以使用以下CSS来确保只有表的主体中的行 - 而不是其标题 - 在没有.selected
类的情况下消失:
tbody tr:not(.selected) {
display: none;
}