表セルtdの幅設定が無効で内部コンテンツは常に引き伸ばされる_HTML/Xhtml_Webページ制作

テーブルページを作成する場合、td の幅は内部コンテンツによって常に引き伸ばされることがありますが、幅を直接設定することは無効です。この例を詳しく見てみましょう。 :

コードをコピーします

コードは次のとおりです。

<div> 🎜><table border= "1px">
<tr>
<td width="100px" style="width: 100px;">1000800</td>











<td>/td>
</table>
</div> >
<tr>
<td>1000000</td> ><tr><td>/td>
</table> 🎜>.div1 {位置: 相対; 幅: 150px; 高さ: 100px; オーバーフロー: スクロール; 境界線: 1px ソリッドレッド;}




クラス div1 のセルには幅が設定されていますが、これは無効です。セルの内容は常に内容によって決まります。セルの内容は内容によって決まるため、「内容」によってセルを拡張する方法を見つけなければなりません。それだけです。

td に div を追加して、div の幅を設定できます。試してみましょう:

クラス div1 のコードの一部を変更します:

コードをコピーします


コードは次のとおりです:

<td width="100px" style="max-width:90%"> 1000800</td> は

コードをコピーします

コードは次のとおりです。

<td><div>1000800</div></td> 次にスタイルを記述します。 :

コードをコピーします

コードは次のとおりです:

td div { width:100px; }

ページを更新すると、結果は次のようになります:

クラス div1 のセルの幅が次のようになっていることがわかります。発効しました。