Css 将 table tr 元素平均分布在 3 列中

Question

我正在使用 tables。如果我隐藏一个或多个 'tr' 元素，有没有一种方法可以在隐藏后再次在 table 中平均分配 tr，例如这里：

如果我隐藏 tr 6，9、10、11、12 可以向后移动一个位置，这样我得到这个布局：

https://jsfiddle.net/v3uh6gr8/3/

或者，或者，您有什么建议来复制它？我不需要使用 tables。

Answer 1

此处更好的选择是使用 css 多列布局并设置 column-count: 3，这将在您删除特定单元格时完全按照您的要求执行。这里是 browser support.

document.getElementById("a1").onclick = function() {
  document.getElementById("t6").style.display = "none";
}

.element {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}

<div class="element">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div id="t6" class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>
</div>

<a id="a1" href="#">hide tr 6</a>

Css 将 table tr 元素平均分布在 3 列中

Css equally distribute table tr elements in 3 columns

css

css-tables