Cssは3つの列にtr要素を均等に分配します

Question

テーブルを使用しています。私は1つ以上の「TR」要素を非表示にした場合、私は同じように再び非表示にした後、テーブル内のTRを配布することができる方法があるここでは例えばので：

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

私はTR 6非表示にした場合、することができます9,10、 11,12の動き1位バックので、私はこのレイアウトを取得：

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>