如何使CSS表格单元格内容填充单元格的高度？

Question

I have a div table layout like this:

...but I'd like the nested table on the right to match the height of the table on the left, so that the right table rows are equally spaced apart. It seems that there's some padding going on that's preventing the right table from filling the full height of it's container.

Want I want is this (it's a photoshop mock, but you get the idea):

I do not want to set a fixed height on the outer container . Both left and right table heights should match whichever one is tallest. I'm using a div table solution at the moment to contain the tables because it solves the problem whereby the table containers (light-green) height will match (I'm open to other possible solutions). However, it still leaves the problem of the shorter table not filling the height of it's container, as in the image.

Here's a fiddle.

The HTML:

<div class="outer-container">
    <div class="inner-container">
      <div class="child">
        <table>
          <tr>
            <td>Label 1a</td>
            <td>Value 1a</td>  
          </tr>
          <tr>
            <td>Label 1b</td>
            <td>Value 1b</td>
          </tr>
          <tr>
            <td>Label 1c</td>
            <td>Value 1c</td>
          </tr>
          <tr>
            <td>Label 1d</td>
            <td>Value 1d</td>
          </tr>
          <tr>
            <td>Label 1e</td>
            <td>Value 1e</td>
          </tr>
        </table>
      </div>
      <div class="spacer"></div>
      <div class="child">
        <table>
          <tr>
            <td>Label 2a</td>
            <td>Value 2a</td>
          </tr>
          <tr>
            <td>Label 2b</td>
            <td>Value 2b</td>
          </tr>
          <tr>
            <td>Label 2c</td>
            <td>Label 2c</td>
          </tr>
      </table>
    </div>
  </div>
</div>

and the styling:

.outer-container {
  display: table;
  padding: 10px;
  background: #5f5f5f;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.inner-container {
    display: table-row;
    padding: 10px;
    margin-top: 50px;
    width: 100%;
}
.child {
    display: table-cell;
    background: #d3e4d1;
    border: 1px solid white;
}
.spacer {
  display: table-cell;
  width: 10%;
}
.child table {
    width: 100%;
    height: 100%;
    padding: 10px;
}
.child td {
    width: 50%;
}
.child td:first-child {
    text-align: right;
    padding-right: 10px;
}

IE8 and up solution required.

Answer 1

The table-cell contents were filling up the height of the cells, the tables (and table cells) were just different sizes because the contents were different and they weren't declared to be the same height.

Here's a very minimal working example: https://jsfiddle.net/egzs1sm3/

If you'd like you could remove the div s they're nested in and just apply the static height to the table s, I don't see why not.

Answer 2

Here's how to accomplish it via flexbox:

https://jsfiddle.net/tqvqsd2y/1/

display:flex on the container is inconsequential, that's just to make to make them be right next to eachother for comparison's sake. No reason you couldn't use that though, I think it's what you wanted.

Answer 3

Me again.

Do they have to be separate tables? Because two cells in the same table would automatically adjust the height and justify the content...

<table>
  <tbody>
    <tr>
      <td>
        <h3>
          <span>asdf 1</span>
          <span>asdf 2</span>
        </h3>
        <h3>
          <span>asdf 1</span>
          <span>asdf 2</span>
        </h3>
      </td>
      <td>
        <h3>
          <span>asdf 1</span>
          <span>asdf 2</span>
        </h3>
        <h3>
          <span>asdf 1</span>
          <span>asdf 2</span>
        </h3>
        <h3>
          <span>asdf 1</span>
          <span>asdf 2</span>
        </h3>
      </td>
    </tr>
  </tbody>
</table>

https://jsfiddle.net/7w963q7v/

Notice how different labels are now inline elements within block elements.

Answer 4

I have changed your existing HTML, that will work on IE8 too. Though I didn't tested on it, but I am sure, it won't deviate.

Option 1:

Using a cellspacing on the main table .

Please find the structure below:

<div class="outer-container">
  <div class="inner-container">
    <table cellspacing="15">
      <tbody>
        <tr>
          <td class="child">
            <table>
              <!-- put your contents of the first table -->
            </table>
          </td>
          <td class="child">
            <table>
              <!-- put your contents of the second table -->
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Watch the demo here .

Option 2:

Without using the cellspacing .

<div class="outer-container">
  <div class="inner-container">
    <table> <!-- no 'cellspacing' here -->
      <tbody>
        <tr>
          <td class="child">
            <table>
              <!--put your contents of the first table -->
            </table>
          </td>
          <td class="spacer"></td> <!-- class spacer with 'width: 10%' -->
          <td class="child">
            <table>
              <!--put your contents of the second table -->
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Watch the demo here .

Update 1:

See the updated demo :

I don't think, the height of the nested table would be able to occupy the height of the largest table using only CSS. That's why I have made their parents as td , where it fills up the containers and doesn't depends upon the content size of its elements only, but the largest one out of all its siblings td 's.

Anyways, one can always target the child elements of any other elements using either JS or CSS.