Tables with same height using JavaScript/CSS

Question

I have a task where I am trying to align four tables in a page which is then printed. But for some reason I am unable to align them with same height. I have a constraint to use only <table> <tr><td> structure.

Below is the current picture, because the data is variant in each table:

And I am trying to achieve is the below because no matter which table has how much data, all of them should be of equal height:

Any help would be great.

Possible duplicate of [How can I force all rows in a table to have the same height](https://stackoverflow.com/questions/5671098/how-can-i-force-all-rows-in-a-table-to-have-the-same-height) — Adharsh M, Jun 10 '17 at 13:32

score 2 · Accepted Answer · answered Jun 10 '17 at 13:35

Take a look at flexboxes:

.wrapper {
  display: flex;
}

table {
  display: flex;
  margin-left: 5px;
  border: 1px solid #000000;
}

<div class="wrapper">

  <table>
    <tr>
      <td>Foo</td>
     </tr>
  </table>
  
  <table>
    <tr>
      <td>Foo</td>
     </tr>
     <tr>
      <td>Foo</td>
     </tr>
     <tr>
      <td>Foo</td>
     </tr>
  </table>
  
  <table>
    <tr>
      <td>Foo</td>
     </tr>
     <tr>
      <td>Foo</td>
     </tr>
  </table>

</div>

score 1 · Answer 2 · answered Jun 10 '17 at 13:38

Get each table's total number of rows. Then get the maximum from these numbers :

<script type="text/javascript">
function max(tab_num_rows) { // you put the numbers into an array
var ret = tab_num_rows[0];
for (var i=1 ; i<tab_num_rows.length; i++) {
   if (ret < tab_num_rows[i])
       ret = tab_num_rows[i];
}
return ret;
}
</script>

Then you make a JQuery to loop each table to add extra rows until the maximum is reached.

Johannes · Answer 3 · 2017-06-10T13:52:41.903

Flexbox will be the typical solution for this (see the other answer), however, if you are also restricted to NOT use flexbox (for example because of compatibility requirements to older browsers), you can put all four tables into the cells of one "wrapper table", like

.wrap {
  width: 100%;
}

td {
  background: #eee;
  vertical-align: top;
}

<table class="wrap">
  <tr>
    <td>
      <table>
        <tr>
          <td>One</td>
        </tr>
        <tr>
          <td>One</td>
        </tr>
        <tr>
          <td>One</td>
        </tr>
        <tr>
          <td>One</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>Two</td>
        </tr>
        <tr>
          <td>Two</td>
        </tr>
        <tr>
          <td>Two</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>Three</td>
        </tr>
        <tr>
          <td>Three</td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>Four</td>
        </tr>
        <tr>
          <td>Four</td>
        </tr>
        <tr>
          <td>Four</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

@pheromix Forgot about that. now they are - I added `vertical-align: top` for the cells. — Johannes, Jun 10 '17 at 13:53

Tables with same height using JavaScript/CSS

3 Answers3