'How to make div height to 100% of parent td

This is my current code:

table{
    table-layout: fixed;
}
table tr td{
    height: 100%;
}
table tr td div{
    height: 100%;
    background: red;
}
<table width="200" border="1">
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><div>Test</div></td>
      <td>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

As you can see the red div doesn't take the 100% of the parent td. I can't set fix dimensions to the parents, as they should adjust automatically to the content.

How can I set the div height to be 100% like the parent td height?

htmlcsshtml-table


Solution 1:[1]

This should work for you:

table{
    table-layout: fixed;
    height:100%;
}

table tr td div{
    height: 100%;
    background: red;
    top:0;
}
<table width="200" border="1">
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><div>Test</div></td>
      <td>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

Solution 2:[2]

Add following style cases inside table tr td div. Your div height will be 100% like the parent td.

table tr td div{
    height: 100%;
    background: red;
    display: inline-block;/* NEWLY ADDED */
    width: 100%;/* NEWLY ADDED */
}

Solution 3:[3]

Please use the below code.

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
  table{
    table-layout: fixed;
  }
  table tr td{
      height: 100%;
  }
  table tr td div{
    height: 100%;
    background: red;
    display: inline-block;/* NEWLY ADDED */
    width: 100%;/* NEWLY ADDED */
    }
  </style>
</head>
<body>
<table width="200" border="1">
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td><div>Test</div></td>
      <td>Lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 TylerH
Solution 2 Faizal
Solution 3 Faizal

Related Questions