Table With Nested Div

by duarteleao

HTML

<table class="outer-table">
  <tbody>
    <tr>
      <td>
        <b>First row</b> takes some height
      </td>
    </tr>
    <tr>
      <td>
        <div class="inner-div">
          <b>Nested div</b> with height 100% 
          gets the table's entire height.
        </div>
      </td>
    </tr>
  </tbody>
</table>

CSS

* {
  padding 0;
  margin: 0;
}

table {
  border-spacing: 0;
}

html, 
body, 
table,
table > tbody,
table > tbody > tr:last-child > td {
  height: 100%;
}

.outer-table > tbody > tr:first-child > td {
  height: 20px;
}

.inner-div {
  height: 100%;
  background: red;
}