Css在3列中平均分配表tr元素

Question

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

1   5   9
2   6   10
3   7   11
4   8   12

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

1   5   10
2   7   11
3   8   12
4   9

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

或者，或者，您建议复制这个？，我不需要使用表格。

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>