Make two floating tables the same height

Question

I have two floating tables with differing numbers of rows (see JSFiddle).

I want the two tables to have the same height without setting the height explicitly to, e.g., 400px. I tried putting them in a div container with height:100% as suggested in the answer to this question but this only led to the tables not being aligned horizontally anymore.

Is there a way to achieve this using only HTML and CSS?

This is the HTML code for the tables:

<table class="left">
    <tr>
        <th>Row1</th>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>        
    </tr>
        <tr>
        <th>Row2</th>
        <td>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td>        
    </tr>
        <tr>
        <th>Row3</th>
        <td>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </td>
        </tr>
    <tr>
        <th>Row4</th>
        <td>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</td>      
    </tr>
</table>

<table class="right">
    <tr>
        <th>1</th>
        <td>Monday</td>     
    </tr>
    <tr>
        <th>2</th>
        <td>Tuesday</td>        
    </tr>
    <tr>
        <th>3</th>
        <td>Wednesday</td>      
    </tr>
    <tr>
        <th>4</th>
        <td>Thursday</td>
    </tr>
        <tr>
        <th>5</th>
    <td>Friday</td>     
    </tr>
    <tr>
        <th>6</th>
        <td>Saturday</td>       
    </tr>
    <tr>
        <th>7</th>
        <td>Sunday</td>     
    </tr>
</table>

With the following CSS:

table {
  border-collapse: collapse;
  border-spacing: 0;
}
table td, th {
    border: 1px solid darkgrey;
    text-align: left;
    padding: 0.4em;
}

table.left {
    width: 70%;
    height: 400px;
    float: left;
}

table.right {
    width: 25%;
    height: 400px;
    float: right;
}

Solution 1

A fairly simple and robust way of doing it is to wrap your two tables into a CSS table by defining a parent container .wrap and two cell lever wrappers .cell-wrap.

The .wrap has display: table and width 100%, which gives you the full width of the screen (or parent block).

Each .cell-wrap has display: table-cell which force these two elements to take on the same height, you also need to set the height to 100% for this to work, and vertical-align: top (or similar).

To get the widths that you need, simply set the width of one of the .cell-wrap elements to some value, for example, 70% on the left .cell-wrap.

You then set the height of the nested tables to 100% and the two tables will scale to the same height. Remember to set the width of the nested table to 100% or else they will take on a shrink-to-fit value.

Although it takes extra mark-up, it is easy to understand, robust, and no JavaScript required. In this case, I would forgive the extra mark-up to get the design that you need.

.wrap {
  display: table;
  width: 100%;
  height: 100%; /* need to set height for this to work in Chrome */
}
.cell-wrap {
  display: table-cell;
  vertical-align: top;
  height: 100%;
}
.cell-wrap.left {
  width: 70%;
  padding-right: 10px;  /* if you need some whitespace */
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  height: 100%;
  width: 100%;
}
table td, table th {
  border: 1px solid darkgrey;
  text-align: left;
  padding: 0.4em;
}

<div class="wrap">
  <div class="cell-wrap left">
    <table class="left">
      <tr>
        <th>Row1</th>
        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
      </tr>
      <tr>
        <th>Row2</th>
        <td>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</td>
      </tr>
      <tr>
        <th>Row3</th>
        <td>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</td>
      </tr>
      <tr>
        <th>Row4</th>
        <td>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</td>
      </tr>
    </table>
  </div>
  <div class="cell-wrap right">
    <table class="right">
      <tr>
        <th>1</th>
        <td>Monday</td>
      </tr>
      <tr>
        <th>2</th>
        <td>Tuesday</td>
      </tr>
      <tr>
        <th>3</th>
        <td>Wednesday</td>
      </tr>
      <tr>
        <th>4</th>
        <td>Thursday</td>
      </tr>
      <tr>
        <th>5</th>
        <td>Friday</td>
      </tr>
      <tr>
        <th>6</th>
        <td>Saturday</td>
      </tr>
      <tr>
        <th>7</th>
        <td>Sunday</td>
      </tr>
    </table>
  </div>
</div>

Solution 2

You can use min-height, it's not the same as height.

The min-height property is used to set the minimum height of an element.

This prevents the value of the height property from becoming smaller than min-height.

See updated Fiddle

Solution 3

Use jQuery for this on page load

jQuery(window).load(function (){
    var height = 0;
    jQuery(".right, .left").each(function(){
        height = jQuery(this).height() > height ? jQuery(this).height() : height;
    }).height(height);
});

Comments

[Soham Banerjee]

check this:- stackoverflow.com/questions/11586277/…

[majorhavoc]

On page load calculate the height of first table using jquery, then assign it to the second table.

[Marc Audet]

Can you explain a bit more about "...the tables not being aligned horizontally anymore", how do you want the rows to align? Do you want all the rows to be the same height?

[atreju]

I want the top and the bottom of the tables to align horiziontally (which can be achieved when setting the height to 400px), not necessarily the rows. When using the div, the tables were not floating anymore but "stacked" on top of each other.

[atreju]

Thanks for the answer. This works fine for me in Firefox but not in Chrome. Do you have any idea why this might happen/how it can be avoided?

[Marc Audet]

If you set the height to 100% for .wrap, then it will also work in Chrome (latest version tested). It's one of those cross-browser issues. CSS specification does not address all the details of tables/table-cell heights so some variations in behavior occurs in some cases.

[NAND]

thanks this works for me will you able to explain the code that is here in line number 4

[Sumit]

Line number 4 is picking the maximum height among the all elements and storing it in variable height

[Magiranu]

Do you left the .right CSS code out on purpose in the above code snipped? I'm trying to rebuild it and I'm kinda worried if I might eventually need it?! There is only .cell-wrap.left but not .cell-wrap.right.

[Marc Audet]

@Magiranu I think that I put in the class name and then I realized that I did not need to specify any styling rules for the right panel. I did not leave out the code, it just happens that I never needed to create it.