隐藏/显示表格换行符布局答案

【问题标题】：hiding/showing a table row breaks layout隐藏/显示表格换行符布局
【发布时间】：2016-09-23 13:13:57
【问题描述】：

我正在尝试隐藏和显示表格行，以下工作但破坏了布局，即空的<td> s 失去了宽度有没有办法防止这种情况？

$(document).on("click ", "tr.grey", function(e) {
  e.preventDefault();
  $( "tr.sales-details" ).removeClass( "show" );
  $(this).nextUntil(".grey").addClass( "show" );
});

tbody tr.sales-details, tbody tr.sales-details-title{
  display: none;
  &.show{
    display: block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" class="modal-table" id="modal-table">
  <thead>
    <tr><th>Surgeon name</th>
      <th>Country</th>
      <th>Antiquity</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr class="grey">
      <td>Alex Lloyd</td>
      <td>Spain</td>
      <td>new client</td>
      <td>2690.58 USD</td>
    </tr>
    <tr class="sales-details-title">
      <td></td>
      <td></td>
      <td><strong>Seller:</strong></td>
      <td><strong>Percentage:</strong></td>
    </tr>
    <tr class="sales-details">
      <td></td>
      <td></td>
      <td>Support</td>
      <td>2690.58 USD</td>
    </tr>
  </tbody>
</table>

【问题讨论】：

标签： javascript jquery html html-table show-hide

【解决方案1】：

尝试使用 {visibility:hidden} 和 {visibility:visible} 隐藏或显示元素 - 这将隐藏内容但保留其在 DOM 中的位置，并且不会导致 disply:none 导致的重排/重新格式化。

tbody tr.sales-details, tbody tr.sales-details-title{
  visibility: hidden;
  &.show{
    visibility:visible;
  }
}

【讨论】：