CSS单元格高度

我在与以下HTML/CSS一个问题：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测试版）。

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

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

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

来源

2011-12-03 ic3b3rg

实际上Firefox并没有正确渲染：CSS height属性将只有如果父元素声明了高度，它就会工作。

你可以尝试以下解决方法，这台父TD将bgcolor：

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

来源

2011-12-03 18:22:42 ptriek

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

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

来源

2011-12-03 18:20:46

我不知道在设计时的高度 - 我可能确定它在运行时和更新时它会改变，但这很麻烦。 – ic3b3rg

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

来源

2011-12-03 18:21:23

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

来源

2011-12-03 18:22:38

CSS单元格高度

回答

相关问题