html - 显示隐藏的表格行搞砸了表格的其余部分

Question

我在隐藏和显示表格行时遇到了问题。我的代码大部分时间都在根据“隐藏”属性隐藏和显示表格行。这些元素被赋予一个属性，该属性获取“display:none”的 css，当通过 JS 删除该属性时，将恢复默认的“display:table-row”。然而，这仍然导致下表行中偶尔出现奇怪情况。更复杂的是，我似乎只在我的 5k iMac 屏幕上看到了问题，而不是在用作第二屏幕的常规显示器上看到了问题。有什么想法吗？

编辑

代码如下:

<table class="clauseTable">
 <thead>
  <tr>
     <th>1</th>
     <th>2</th>
     <th>3</th>
     <th>4</th>
     <th>5</th>
     <th></th>
  </tr>
</thead>
<tbody id="tagsTable">
  <tr playbookid="670" id="6878" value="6878">
     <td id="tagName">Name</td>
     <td id="required" class="clauseTable--radioContainer required undefined">

     </td>
     <td id="rejected" class="clauseTable--radioContainer rejected undefined">

     </td>
     <td id="conditional" class="clauseTable--radioContainer conditional selected">

     </td>
     <td id="ignore" class="clauseTable--radioContainer ignore undefined ">

     </td>
     <td id="editBtn" class="editClauseBtn"></td>
  </tr>
  <tr id="tagsDescriptionsRow6878" class="conditional--row tagsDescriptionsRow" hidden="hidden">
     <td colspan="6">

     </td>
  </tr>
  </tbody>
</table>

还有 SCSS:

tr {
      display: table-row;
      &[hidden='hidden'] {
        display: none;
      }
    }

---

---

Answer 1

我认为使用类而不是“隐藏”属性会更简单、更安全。

tr.hidden {
    display: none;
}

代替

tr {
  display: table-row;
  &[hidden='hidden'] {
    display: none;
  }
}