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());
は、他の解決策はありますか?
さて、Firefoxはそれを最低の高さにしていません。セルの高さが指定した高さよりも低くなるようにしています。したがって、私の質問 – grom
Firebugレイアウトペインの白い「Staff」セルを見ると、内容の高さは33(ピクセル)、上と下のパディングは4、下の境界は1となり、合計42となります。他のブラウザ'height'プロパティをon * content * heightの最小値を設定するものとして扱います。これが望ましくないバリエーションを引き起こす場合、私は、 'div'にセルの内容をラップし、その中に任意のパディングを設定し、表のセルのパディングをゼロに設定するよりも良い選択肢はないと思います。 –
ええええええええええええええええええええええええええええええええええ投稿者: ?? – grom