html - HTML テーブル - td の子孫で max-width が機能しない

Question

を含むテーブルとwidth: 100%、そのテーブル内にを含む要素width: 40em; max-width: 100%がありますが、ブラウザウィンドウが小さくなりすぎると、要素がまだテーブルを引き伸ばしています。

この要素を固定幅にしたいが、コンテナが小さくなりすぎてもコンテナより大きくならないようにしたい。固定幅に十分なスペースがない場合max-width: 100%は、使用可能なスペースに合わせて小さくする必要があります。これはテーブルの外で機能します。

max-widthはテーブル自体にはありません。<input>私がリンクしたコードには、要素に同じ問題がある別のテーブルが含まれていますが、実際には要素にあり<span>ます。<input>また、正しく動作するテーブル外のフィールドも含まれます。

score 41 · Accepted Answer

の子孫のプロパティを機能table-layout: fixedさせるには、 for table 要素を使用する必要があります。max-width<td>

MDNから:

table-layoutCSS プロパティは、表のセル、行、および列のレイアウトに使用されるアルゴリズムを定義します。

固定値:
表と列の幅は、表要素と列要素の幅、またはセルの最初の行の幅によって設定されます。後続の行のセルは列幅に影響しません。

table {
    table-layout: fixed;
}

score 2 · Accepted Answer

要素に配置すると、要素はに引き伸ばされmax-width: 100%ます。

固定幅が必要な場合は、width: 40px(% の代わりにパーセンテージがリキッドレイアウトで使用されます) を使用します。

2 に答える 2