html - 表格布局问题

Question

我有以下简化布局:

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>

我需要蓝色轮廓的 div 来填充它的单元格。我已经尝试在 div 和单元格上调整大小并更改两者的显示(内联 block 等)。我尝试的任何方法都不起作用。

单元格“A”的内容决定表格的高度。

单元格“B”的内容决定了其单元格的宽度。

它必须在 Chrome、Firefox、Safari、Opera 和 IE 8+ 中以相同方式工作

TIA

Answer 1

Height:100% 要求父项具有明确的高度。在单元格 b 中设置与在单元格 a 中相同的高度，这决定了表格高度，在本例中为 300px，子 div 将展开。

编辑如果您不能显式定义任何父级高度，则需要使用 JS/Jquery。看这里http://jsfiddle.net/rersW/3/