html - 始终显示表头，同时所有行都显示 :hidden;

Question

我有一个动态表，根据用户事件，表的行数会发生变化。我的 tr 不是类 .selected 被设置为 display:none; - 很可能没有表行具有该类。问题是当我设置 display:none 时表头消失了，除了当原始第一行有类 selected 时。换句话说，只有当第一行被选中时，标题才会出现。我猜这是有道理的，但是在使用 display:none; 时有什么办法可以解决这个问题吗？我希望表头始终可见，无论隐藏了哪些行。

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

我尝试添加诸如 not(:first-child) 之类的内容，但没有任何效果。我使用这种方法是否走在正确的轨道上？我认为动态添加和删除行会涉及太多迭代或减慢速度。

Answer 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;
}