Home/ Questions/Q 7818781
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T06:41:45+00:00

I have the following simplified layout: jsfiddle: http://jsfiddle.net/rersW/ <table> <tr> <td style=border:1px solid black;height:300px;width:100px>A</td>

  • 0

I have the following simplified layout:

jsfiddle: http://jsfiddle.net/rersW/

<table>
  <tr>
    <td style="border:1px solid black;height:300px;width:100px">A</td>
    <td style="border:1px solid black;height:100%">
      <div style="border:1px solid blue;height:100%;width:100px">B</div>
    </td>
  </tr>
</table>

I need the blue outlined div to fill its cell. I’ve tried box-sizing on the div and the cell as well as changing the display of both (inline-block, etc.). Nothing I try is working.

The contents of cell “A” determine the height of the table.

The contents of cell “B” determine the width of its cell.

It must work identically in Chrome, Firefox, Safari, Opera & IE 8+

TIA

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Height:100% requires that the parent has an explicit height. Set the same height in cell b as you do in cell a, which is determining the table height, in this case 300px and the child div will expland.

    EDIT
    If you can’t explicitly define any of the parent heights you will need to use JS/Jquery. See here http://jsfiddle.net/rersW/3/

    • 0