CODEWITHSUNDEEP
htmlcsshtml-table
Wouter
Wouter

Reputation: 1987

How to make <div> fill <td> height in Firefox

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.

Upvotes: 15

Views: 9269

Answers (2)

Rob Howells
Rob Howells

Reputation: 516

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>

Upvotes: 24

karan mohnani
karan mohnani

Reputation: 29

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>

Upvotes: -3

Related Questions