Toniq Toniq - 3 months ago 16
CSS Question

Css equally distribute table tr elements in 3 columns

I am using tables. If I hide one or more 'tr' element, is there a way I can equally distribute tr in table again after hide, so for example here:

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


If I hide tr 6, can a 9,10,11,12 move one position back so I get this layout:

1 5 10
2 7 11
3 8 12
4 9


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

Or, alternatively, what do you suggest to replicate this?, I dont need to use tables.

Answer

Better option here is to use css multi-column layout and set column-count: 3 which will do exactly what you want when you remove specific cell. Here is 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>

Comments