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單元格高度

回答

相關問題