CSS Calc() と Table-Layout を使用してテーブルの列幅を柔軟にするにはどうすればよいですか?

CSS Calc を使用したテーブルの柔軟な列幅

固定幅の列と柔軟な幅の列の両方を備えたテーブルを追求するには、次を使用します。 CSS calc() 関数だけでは不十分な場合があります。テーブルでは、セルの内容に基づいてスペース配分に特定のルールが適用されるため、calc() が利用可能なスペースを均等に配分することが困難になります。

このハードルを克服するには、テーブル レイアウト属性を固定に設定することができます。テーブル要素。これにより、子 td 要素が定義した幅に従うことが保証されます。さらに、テーブルの幅 (100% など) を指定する必要があります。

テーブル レイアウトを有効にするには、テーブルの表示タイプもテーブルでなければなりません。これはデフォルト設定であり、通常は省略されます。ただし、完全を期すためにここに含めています。

これで、パーセンテージを自由に使用して、残りの列の幅を調整できます。例:

固定幅の列を考慮した後の残りのスペースは、相対幅の列に分散されます。

注意すべき点は、テーブルに display: table を使用することです。これは、テーブルの高さ (または最小高さまたは最大高さ) を定義できなくなったことを意味します。

以下は、これらを組み込んだ変更された例です。修正:

以上がCSS Calc() と Table-Layout を使用してテーブルの列幅を柔軟にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。