html - CSS: テーブルの 1 列の可変サイズ

Question

それぞれ 25 ピクセルの 4 つの列がある 100 ピクセルのテーブルが必要です。

次に、ブラウザを展開すると、最初の列は最大 50px になります。

CSSのみの解決策はありますか? これらのスタイルを設定するために js を使用することは避けたいと思います。

HTML:

<table>
<tbody>
 <tr>
   <td>Item 1 expands</td>
   <td>Item 2</td>
   <td>Item 3</td>
   <td>Item 4</td>
 </tr>
</tbody>
</table>

CSS:

table {
  table-layout: fixed;
}

td {
  width: 25px;
}

td:nth-child(1) {
  ?? max-width: 500px; ??
  ?? width: 25%; ??
}

score 3 · Accepted Answer

メディアクエリで新しい幅にスナップするのではなく、列をスムーズに拡張するには:

table{ 
  max-width: 125px;
}
td{
   min-width: 25px;
}
td:nth-child(1){
   width:40%; // Translates to roughly 50px
}

これにより、使用可能なウィンドウスペースで最初の列を拡張できます。

テーブル125pxの幅が下に行くmin-widthと、 td が作動し、最初の子が下に行かないようにするため、これは機能します25px。

一方、テーブルが100px幅よりも大きい場合 (ユーザーがブラウザーウィンドウを拡大したため)、40%幅はそれ以上にはなり52pxません。（それmax-width 125px;がモデレートに役立ちます）。

に関する注意nth-child: Jay Na が述べたように、nth-childブラウザのサポートはよりも少なくなっていfirst-childます。first-child代わりに疑似クラスの使用を検討することをお勧めします。

MDN ドキュメント

score -1 · Accepted Answer

固定したい TD 要素に 25px の a を設定します。その時点から、テーブルの幅が最初の列の幅を定義するので、それを定義することは理にかなっています。

たとえば、次のように編集します。

table {
    max-width:575px;
}
td {
  width: 25px;
}

td:nth-child(1) {
width:auto;
}

score -2 · Accepted Answer

次のようにします。

@media all and (min-width:400px) { /* or whatever the threshold size is */
    td:first-child {width:50px}
}

3 に答える 3