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%;
}

注:

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

変更済み例:

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

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