Question

我遇到以下html / css的问题：

<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>

doctype是HTML 5。

html在Firefox（9.0 beta）中呈现我想要的方式。

在IE，Opera，Chrome＆amp; Safari，“Some Text”单元格的背景不会填充包含单元格。

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

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

Answer 1

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

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

Answer 2

实际上，我相信它确实如此。最外层padding:5px上有td样式，但灰色背景CSS应用于内部td。因此，灰色单元周围的间距。如果我删除填充，灰色填充左侧单元格。

Answer 3

从您的第一个padding:5px元素中删除<td>。

Answer 4

实际上Firefox无法正确呈现：如果父元素的高度已声明，则CSS高度属性将仅。

您可以尝试以下解决方法，在父级td上设置bgcolor：

http://jsfiddle.net/QYVPb/2/

CSS Cell Height

4 个答案: