ホームページ > ウェブフロントエンド > CSSチュートリアル > calc() を使用して固定幅列と可変幅列を含むテーブルを作成するにはどうすればよいですか?

calc() を使用して固定幅列と可変幅列を含むテーブルを作成するにはどうすればよいですか?

Susan Sarandon
リリース: 2024-11-24 00:34:11
オリジナル
933 人が閲覧しました

How Can I Create a Table with Fixed and Variable-Width Columns Using calc()?

テーブルでの calc() の使用: 固定幅列と可変幅列

固定幅と可変幅のテーブルを作成しようとすると、 CSS calc() 関数を使用して幅の列を作成すると、パーセンテージ (%) に関する問題が発生する可能性があります。テーブルには、calc() との互換性を失わせるスペース配分に関する特定のルールがあります。

table-layout を使用した解決策:

これを解決するには、table-layout 属性を fix に設定します。テーブル用に。これにより、テーブルの子要素 ​​(td) が指定された幅に従うようになります。さらに、テーブルの表示を table に設定し、幅を指定します。

table{
   table-layout:fixed;
   width: 100%;
   display: table;
}
ログイン後にコピー

パーセンテージベースの列:

残りの列には、計算の代わりに単純なパーセンテージを使用します。 ()。固定幅の列を収容した後の残りのスペースは、これらの列に比例して配分されます。

td.title, td.interpret{
    width:40%;
}
td.album{
    width:20%;
}
ログイン後にコピー

注:

このソリューションを使用するには、テーブル表示が必要です。テーブルに設定されるため、高さを設定できなくなります。

変更済み例:

元のコードの修正バージョンは次のとおりです:

<table border="0">
ログイン後にコピー

以上がcalc() を使用して固定幅列と可変幅列を含むテーブルを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート