12

Over here, this question has been answered for IE and Chrome, but the proposed solution does not seem to work in Firefox 16, 45, and probably all versions in between.

Basically, the proposed solution is as follows:

table,th,td {
  border: 1px solid black;
}
<table>
  <tr>
    <td style="height:1px;">
      <div style="border:1px solid red; height:100%;">
        I want cell to be the full height
      </div>
    </td>
    <td>
      This cell
      <br/>is taller
      <br/>than the
      <br/>first one
    </td>
  </tr>
</table>

By setting the height of the td to 1px, the child div can set height:100%. In Chrome and IE the 100% is then interpreted as "the height of the cell", while in Firefox it seems to become the max height needed for the divs content.

Running the example above in Firefox will illustrate this intuitively...

So, I'm looking for a solution that -also- works in Firefox.

mplungjan
  • 169,008
  • 28
  • 173
  • 236
Wouter
  • 1,829
  • 3
  • 28
  • 34
  • 1
    Possible duplicate? http://stackoverflow.com/questions/19428121/height100-inside-table-cell-not-working-on-firefox-and-ie – Narxx Apr 12 '16 at 14:16
  • @Narxx: I don't think so. They are using css div-tables, not html tables. I should be switching though, but I don't have time to refactor atm... – Wouter Apr 12 '16 at 14:24
  • 1
    Note that in chrome 50 (coming out soon), this behavior changes from IE's to Firefox's. – dgrogan Apr 13 '16 at 03:37
  • @dgrogan: Damn. Well, guess I'll finally be refactoring my HTML tables to CSS div-tables... Thx for testing in Chrome 50! – Wouter Apr 13 '16 at 09:24
  • 1
    HTML vs div tables shouldn't matter. Starting in chrome 50 any {blocks with % height} that are children of {table cells with auto height} will be treated as if height: auto was specified. This matches the CSS spec and FF behavior, but deviates from IE. It's easy to get back to the old behavior: specify height:100% on the table cell. – dgrogan Apr 13 '16 at 15:43
  • 2
    FYI to future readers, the change to chrome 50 was reverted; broke too many existing layouts. – dgrogan Nov 03 '16 at 18:48
  • FX 107 has the same problem – mplungjan Dec 23 '22 at 20:19

2 Answers2

22

Try adding display: table to your nested <div>, and change height: 1px to height: 100% on the parent <td>

Example that works in Firefox, IE and Chrome 

table,
th,
td {
  border: 1px solid black;
}

.fix_height {
  height: 1px;
}

@-moz-document url-prefix() {
   .fix_height {
        height: 100%;
    }
}
<table>
  <tr>
    <td class="fix_height">
      <div style="border:1px solid red; height:100%; display:inline-table">
        I want cell to be the full height
      </div>
    </td>
    <td>
      This cell
      <br/>is taller
      <br/>than the
      <br/>first one
    </td>
  </tr>
</table>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Rob Howells
  • 496
  • 3
  • 9
  • 1
    Using inline-table also makes it work in Chrome. But not in IE. Getting closer.... :) – Wouter Apr 12 '16 at 14:29
  • 2
    Through css it's possible to set the height to 100% for firefox, but to 1px for other browsers. That's a workable solution. I just still need to test it in Safari... I'll add this as an example to your answer, so i can accept it as a full answer. – Wouter Apr 12 '16 at 14:39
-3

Try the following it works in Firefox.Just you have to replace the % with pixels for height

table,th,td {
  border: 1px solid black;
}
<table>
  <tr>
    <td style="height:1px;">
      <div style="border:1px solid red; height:100px;">
        I want cell to be the full height
      </div>
    </td>
    <td>
      This cell
      <br/>is higher
      <br/>than the
      <br/>first one
    </td>
  </tr>
</table>
karan mohnani
  • 29
  • 5
  • 2
    That will make the height of the first cell stuck at 100px, which is even higher than the height of the second cell. Also, when removing text from the second cell, it will prevent the first cell from becoming less high. I'm looking for a flexible solution that will work with any cell height. – Wouter Apr 12 '16 at 14:42