显示隐藏的表格行把桌子的其余部分搞砸了答案

【问题标题】：Display hidden table row screws up rest of table显示隐藏的表格行把桌子的其余部分搞砸了
【发布时间】：2017-05-22 16:23:00
【问题描述】：

我在隐藏和显示表格行时遇到问题。我的代码大部分时间都在根据其“隐藏”属性隐藏和显示表格行。元素被赋予一个属性，该属性获得“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;
      }
    }

【问题讨论】：

screen-width 的样式可能存在问题，但您能否向我们展示您的代码，以便我们更好地查看它
试图找出一种在不显示机密信息的情况下显示代码的方法。等等……
没问题，只需添加它，例如，在带有一些 lorem ipsum 文本的 jsfiddle 中
添加了代码。太多额外的标记和样式无法将其移植到 jsfiddle。
@Deathstorm 你能详细说明屏幕宽度可能导致哪些类型的问题吗？这个问题只发生在我的视网膜屏幕上。

标签： html css html-table

【解决方案1】：

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

tr.hidden {
    display: none;
}

而不是

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

【讨论】：