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> 

DOCTYPEはHTML 5

されるHTMLは、私が好きな方法をレンダリングFirefox（9.0ベータ版）の

IE、Opera、Chrome & Safariでは、「Some Text」セルの背景が含まれていません。

htmlの構造はかなり柔軟性がありません。このhtmlは、はるかに大きなアプリケーションの単純化された構造です。

私はいくつかの簡単なCSSが問題を解決することを望んでいます。あなたは、親テーブルの高さを設定する必要があります

Answer 1

実際にFirefoxは正しくレンダリングされません。親要素の高さが宣言されている場合は、CSS高さプロパティのみが動作します。

あなたは親のTDでBGCOLORを設定し、次の回避策、試みることができる：私はデザイン時に高さを知らない

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

Answer 2

：http://jsfiddle.net/QYVPb/1/

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

Answer 3

は実は、私はそれがないと信じています。外側のtdにはpadding:5pxスタイルがありますが、灰色の背景CSSは内側のtdに適用されます。したがって、灰色のセルの周りの間隔。パディングを削除すると、左のセルが灰色で塗りつぶされます。

Answer 4

最初の<td>要素からpadding:5pxを削除します。