DaniSpringer.com DaniSpringer.com - 5 months ago 10
CSS Question

How to easily add/remove cells from a Table (Shifting existent cells)

I want a table with it's cells automatically aligned to be two per row, meaning that if a add or remove a cell from anywhere in the table, the cells will automatically shift to be two per row, with one on last row if the total number of cells is odd.

So if, for example, I'll add a cell (or probably

divs
) to the top of the table, what will happen, is

From this:

<table>

<tr>
<td>OLD1</td> <td>old2</td>
</tr>


<tr>
<td>old3</td> <td>OLD4</td>
</tr>

</table>


To this:

<table>

<tr>
<td>NEW</td> <td>OLD1</td>
</tr>


<tr>
<td>old2</td> <td>old3</td>
</tr>


<tr>
<td>OLD4</td>
</tr>

</table>


Notice the automatically added row.

Answer

I'll show you three ways to accomplish what you need,

  • Using flex (modern browsers only)
  • Using inline-table (problem with cell height but usable as sort-of fallback)
  • Using standard <table> (All browsers!)

Using CSS3's FLEX

.table{
  display: flex;
  flex-wrap: wrap;
}
.cell{
  width:50%;
  background:#ddd;
}
<div class="table">
  <div class="cell">NEW</div>
  <div class="cell">OLD1</div>
  <div class="cell">OLD2</div>
  <div class="cell">OLD3<br>new line</div>
  <div class="cell">OLD4</div>
</div>

Using inline-table (issue with cell height)

display: table;   for the parent element and
display: inline-table for the inner DIVs:

.table{
  display:table;
}
.cell{
  display:inline-table;
  width:50%;     /* With percentage you simulate "how-many-per-Row" */
  background:#ddd;
}
<div class="table">
  <div class="cell">NEW</div>
  <div class="cell">OLD1</div>
  <div class="cell">OLD2</div> <!-- Works but notice this cell height  -->
  <div class="cell">OLD3<br>new line</div> 
  <div class="cell">OLD4</div>
</div>

You could use the inline-table as a fallback for older browsers - it's not the exact same result but without JavaScript it's the best you could get.

Take a look in the specs about the display property: https://developer.mozilla.org/en-US/docs/Web/CSS/display


Using <table>, <tr> and <td> and JavaScript (jQuery)

If you want to stick to good 'ol table elements you can use "a bit" of jQuery.
In that case it's a bit more complicated (see code-comments):

jQuery(function($){ // DOM is now ready

  var $table = $("table"); // Get your table
  var maxRowCells = 2;     // only 2-per-Row
  var counter = 0;         // just a dummy counter

  function prependNewCell(){

    var $newCell = $("<td/>", {html: "NEW"+(++counter)});

    // Is the last row full?
    if($table.find("tr:last td").length == maxRowCells){
      // If true, append a new TR to TABLE to shift TD's to
      $table.append( $("<tr/>") ); 
    }


    // Shift all last TD's to the next row:
    $table.find("tr:not(:last)").each(function(){
      var $tdLast = $(this).find("td").last();
      $(this).next("tr").prepend( $tdLast );
    });

    // Finally. Prepend the new TD element to the first TR
    $table.find("tr").first().prepend( $newCell );

  }

  $("button").on("click", prependNewCell);

});
td{
  width:50%;
  background:#ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>ADD NEW CELL ON TOP</button>

<table>
  <tr>
    <td>OLD1</td>
    <td>OLD2</td>
  </tr>
  <tr>
    <td>OLD3</td>
    <td>OLD4</td>
  </tr>
</table>

Comments