Make div height 100% in a table cell [duplicate]

Question

How can I make div inside a cell table 100% height when the row is stretched by word wrapping in another cell.

In this Fiddle I want to have the div in the second cell to fill the whole cell (100% of height).

td {
  border: 1px solid red;
  width: 50%;
  background-color: yellow;
}
td div {
  background-color: green;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

<table>
  <tr>
    <td>
      <div>
        abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde
      </div>
    </td>
    <td>
      <div>
        xxx
      </div>
    </td>
  </tr>
</table>

Answer 1

If you only need the background color to cover the entire cell, you can just set it on the td rather than div.

td:last-child {
  background-color: green;
}

If you really need to make the div to cover the cell, you can try using the position tricks. Note, this approach only works when there is less data in the second cell.

td {
  position: relative;
}
td:last-child div {
  background-color: green;
  width:100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

jsFiddle

Answer 2

edit

As mentioned in the comments below, my first approach display: inline-block did not work in firefox.

As progysm mentioned, using tr, td{height: 100%} works well on all browsers, see fiddle http://jsfiddle.net/3v4wz030/61/

td div {
    background-color: green;
    width:100%;
    height: 100%;
    margin: 0;
    padding:0;
}
 tr, td { height: 100%; } 

Code below here does not work in firefox, I failed on my first attempt

Just add display: inline-block see fiddle http://jsfiddle.net/3v4wz030/39/

td div {
    background-color: green;
    width:100%;
    height: 100%;
    display:inline-block;
    margin: 0;
    padding:0;
}