始终显示表格标题,同时显示所有行:隐藏;

时间:2017-02-15 15:03:46

标签: html css

我有一个动态表,根据用户事件,表的行数会发生变化。我的tr而不是.selected的{​​{1}}设置为display:none; - 并且完全有可能没有表格行。当我设置display:none时,除了原始第一行有类selected之外,问题是表标题消失了。换句话说,仅当选择第一行时才会出现标题。我认为这是有道理的,但是在处理display:none;时有没有办法解决这个问题?我希望表头始终可见,无论隐藏哪些行。

tr:not(.selected) {
    display:none;
}

我尝试添加not(:first-child)这样的内容,但都没有效果。我使用这种方法是在正确的轨道上吗?我认为动态添加和删除行会涉及太多的迭代或减慢速度。

1 个答案:

答案 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;
}