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 和单元格上调整大小，并更改两者的显示（内联块等）。我尝试的任何方法都不起作用。

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

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

它必须在 Chrome、Firefox、Safari、Opera 和 IE 8+ 中同样工作

TIA

Answer 1

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

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

Answer 2

如果不太正确，试试这个并发表评论：|

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

Answer 3

原因是height: 100%;需要有一个定义了高度的父级，否则你必须

• 要么固定高度。
• 或链height: 100%上所有的身体，如果在任何地方都没有固定高度

为了说明我的观点，将您的标记升级到此

<td valign="top" style="border:1px solid black; height: 300px;">
  <div style="border:1px solid blue;height:100%; display: block;width:100px">B</div>
</td>

演示

Answer 4

更新：

我想出了一些可以在没有 JS 的情况下工作的东西：

<table>
  <tr>
    <td>
      <div style="position:relative">
        <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;box-sizing:border-box;height:100%;width:100px">&nbsp;</div>
            </td>
          </tr>
        </table>
        <div style="border:1px solid red;height:100%;position:absolute;right:0;top:0;width:100px">B</div>
      </div>
    </td>
  </tr>
</table>

渲染时看起来不漂亮，但生产结构没有边框或填充。

任何更简单的解决方案将是首选。