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 — Adharsh M
– Adharsh M, Commented Jun 10, 2017 at 13:32

PeterMader · Accepted Answer · 2017-06-10 13:35:13Z

2

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>

answered Jun 10, 2017 at 13:35

PeterMader

7,3552 gold badges24 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pheromix · Accepted Answer · 2017-06-10 13:38:15Z

1

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.

answered Jun 10, 2017 at 13:38

pheromix

19.6k33 gold badges96 silver badges182 bronze badges

Comments

Johannes · Accepted Answer · 2017-06-10 13:52:41Z

1

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>

edited Jun 10, 2017 at 13:52

answered Jun 10, 2017 at 13:41

Johannes

67.9k22 gold badges85 silver badges139 bronze badges

1 Comment

Johannes Over a year ago

@pheromix Forgot about that. now they are - I added vertical-align: top for the cells.

Collectives™ on Stack Overflow

Tables with same height using JavaScript/CSS

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related