ホームページ > 記事 > ウェブフロントエンド > `min-width` と `max-width` が表のセルでは機能しないのはなぜですか?そのサイズを制御するにはどうすればよいですか?
`min-width` と `max-width` が表のセルでは機能しないのはなぜですか?そのサイズを制御するにはどうすればよいですか?
- Mary-Kate Olsenオリジナル
- 2024-10-25 07:07:02459ブラウズ
テーブルの最小幅属性と最大高さ属性
「min- width' プロパティと 'max-width' プロパティについては、簡単ではない可能性があります。この記事では、これらのプロパティが無視され、予期しない動作が発生するという一般的な問題について説明します。
問題:
「min-width」と「max-width」の定義「td」要素上、または「td」要素内にネストされた「div」要素内では、競合する動作が発生します。コンテンツは指定されたサイズに準拠している可能性がありますが、テーブル全体のサイズは変更されず、余分な空白が残ります。
解決策:
CSS 仕様では、「min-width」が指定されています。 ' および 'max-width' プロパティは表のセル (つまり 'td' 要素) には定義されていません。代わりに、'width' プロパティを使用して最小幅を強制する必要があります。
表のセルの幅を確実に強制するには、'table-layout' プロパティを「fixed」に設定する必要があります。これにより、指定された「幅」値に基づいて列の幅を計算するようブラウザに指示され、空白の問題が解消されます。
コード例:
次の変更されたコードは、この問題を解決します。 'width' プロパティを使用し、'table-layout' を "fixed" に設定します:
<code class="html"><html>
<head>
<style type="text/css">
td {
border: 1px solid black;
}
html,body,.fullheight {
height: 100%;
width: 100%;
}
.minfield {
width: 10px;
border: 1px solid red;
overflow: hidden;
}
table {
table-layout: fixed;
}
</style>
</head>
<body>
<table class="fullheight">
<tr>
<td class="minfield">
<div class="minfield">
<p>hallo</p>
</div>
</td>
<td><p>welt</p></td>
</tr>
</table>
</body>
</html></code>
'table-layout' を "fixed" に設定すると、明示的に定義されていない列幅にも影響する可能性があることに注意してください。 。意図しない結果を避けるために、すべての列の幅が指定されていることを確認してください。
以上が`min-width` と `max-width` が表のセルでは機能しないのはなぜですか?そのサイズを制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。