CSS 单元格高度

Question

我在使用以下 html/css 时遇到问题:

http://jsfiddle.net/QYVPb/

<table cellpadding="0" cellspacing="0" style="background:#FAFAFA; border:1px solid black">
  <tbody>
    <tr>
      <td style="height:100%; padding:5px">
        <table cellpadding="0" cellspacing="0" style="table-layout:fixed; height:100%">
          <tbody>
            <tr>
              <td style="padding:10px; font-weight: 700; text-align: center; background: #E0E0E0">Some Text</td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style="height:100px; padding:10px">This cell controls the height</td>
    </tr>
  </tbody>
</table>

文档类型是 HTML 5。

html 以我希望在 Firefox(9.0 beta)中呈现的方式呈现。

在 IE、Opera、Chrome 和 Safari 中，“一些文本”单元格的背景不会填充包含的单元格。

html 的结构相当不灵活 - 这个 html 是一个更大的应用程序的简化结构。

我希望有一些简单的 CSS 来解决这个问题。

Answer 1

需要设置父表的高度:http://jsfiddle.net/QYVPb/1/

<table cellpadding="0" cellspacing="0" style="height:100px; background:#FAFAFA; border:1px solid black">