2009-08-20 5 views
0
<td> 
<div id="test">...</div> 
</td> 
<td> 
..... 
</td> 

が、やる何のCSSスタイルはありませんこれ(幅の設定、パディングなし)!tdの内側のdivが、tdは予想外に拡大している私は、TDは、「テスト」のdiv(幅+ボーダー+マージン全て含まれている)に比べて約40ピクセル幅が広い放火犯から見ることができます

「td」はdivと同じくらい広いのはなぜですか?

私は今、 "テスト" divの幅になるようにtd9をハードコーディングしていますが、不快感を感じます。

答えて

3

残りのコードがなければ、私はここに足を運んでいますが、<td>はテーブルの幅/テーブルの列数に基づいて自動サイズになります。テーブルに明示的な幅が割り当てられていない場合は、コンテナまたは親要素の幅が100%に拡大されます。テーブルの明示的な幅や必要に応じてテーブルのセルを設定することで、これを避けることができます。

次のシナリオでは、各列は表の幅/列の数、またはこの場合は400/4 = 100に自動的にサイズ変更されます。したがって、各列の幅は100ピクセルになります。

<table style="width:400px"> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</table> 

このシナリオでは、ブラウザによっては2つの可能性があります。 1.テーブルは親の幅の100%、ここでは600pxに拡大されます。つまり、各列のサイズは自動的に150ピクセルになります。 2.表と列は、その列グループ内の最も幅の広い子要素の幅に拡張できます。

<body style="width: 600px"> <!-- Could be a div or other element here --> 
<table> 
<td></td> 
<td></td> 
<td></td> 
<td></td> 
</table> 
</body> 

WC3スペックはhereを発見し、ブラウザはは、テーブルに関してはHTML 4.01仕様を実装するためにを想定しているどのようにいくつかの素晴らしい詳細を提供することができます。

+0

tdの幅を指定せずに、自動サイズ設定はどのように行われますか?私は何とか自動サイズ調整を起動しました。私はtd(s)の内容に応じて異なる幅が割り当てられていることを意味します。しかし、それはどのように行われますか? – omg

+0

ブラウザはWC3の推奨に従ってテーブルの列の自動サイズを管理します。仕様は http://www.w3.org/TR/html401/struct/tables.html#h-11.2.4.4にあります。 – PortageMonkey

関連する問題