2012-01-27 19 views
2

Firefoxでテーブルセルの高さを固定するにはどうすればよいですか? IEとChromeで次のように動作しますが、Firefoxは指定された高さを使用していません。Firefoxでテーブルセルの高さを固定するにはどうすればよいですか?

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Table Cell Height Test</title> 
     <style type="text/css"> 
     * { 
      padding: 0; 
      margin: 0; 
     } 

     .overlay { 
      border-collapse: collapse; 
      table-layout: fixed; 
      position: fixed; 
      top: 0px; 
      left: 0px;   
     } 

     .overlay th { 
      padding: 4px; 
      border: 1px solid black; 
      background-color: white; 
     } 

     .test { 
      border-collapse: collapse; 
      table-layout: fixed; 
     } 

     .test th { 
      padding: 4px; 
      border: 1px solid black; 
      background-color: yellow; 
     } 
     </style> 
    </head> 
    <body> 
     <table class="overlay"> 
      <thead> 
       <tr> 
        <th style="height: 42px;">Staff</th> 
       </tr> 
      </thead> 
     </table> 
     <table class="test"> 
      <thead> 
       <tr> 
        <th style="height: 42px;">Staff</th> 
        <th style="height: 42px;">Monday<br> 
        27th</th> 
       </tr> 
      </thead> 
     </table> 
    </body> 
</html> 

目的は、テストテーブルと同じ高さをオーバーレイすることです。

私が見つけた1つの解決策は、divにセルの内容をラップし、divの高さを設定することです。私が発見した

別の解決策は、jQueryのを使用している、

$('table.overlay tr').height($('table.test tr').outerHeight()); 

は、他の解決策はありますか?

答えて

4

height of a cellは、その内容の高さの要件に依存し、任意height値セットは、最小高さを課すと解釈されるであろう。コンテンツがテキストの場合、高さの要件はテキストの行数と行の高さによって異なり、ブラウザによって異なる場合があります。だから、ある一定の(ピクセル単位の)領域内で一貫したレンダリングが本当に必要な場合は、フォントサイズと行の高さをピクセル単位で設定する必要があります(これは当然の問題です)。

+0

さて、Firefoxはそれを最低の高さにしていません。セルの高さが指定した高さよりも低くなるようにしています。したがって、私の質問 – grom

+1

Firebugレイアウトペインの白い「Staff」セルを見ると、内容の高さは33(ピクセル)、上と下のパディングは4、下の境界は1となり、合計42となります。他のブラウザ'height'プロパティをon * content * heightの最小値を設定するものとして扱います。これが望ましくないバリエーションを引き起こす場合、私は、 'div'にセルの内容をラップし、その中に任意のパディングを設定し、表のセルのパディングをゼロに設定するよりも良い選択肢はないと思います。 –

+0

ええええええええええええええええええええええええええええええええええ投稿者: ?? – grom

関連する問題