显示隐藏的表格行固定表

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

我认为使用类而不是＆＃34;隐藏＆＃34;会更简单，更安全。属性。

tr.hidden {
    display: none;
}

而不是

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