固定幅の列を含むテーブルの可変幅の列にパーセンテージを使用するにはどうすればよいですか?

テーブルで calc() を使用する: 代替ソリューション

calc() 関数を使用して固定幅テーブル列と可変幅テーブル列を実装しようとする場合、限界に遭遇します。テーブルでは、calc() 関数は幅の計算にパーセントをサポートしていません。

この課題を克服するには、別のアプローチを採用することを検討してください。

1. テーブル レイアウトを設定する属性: テーブルの table-layout プロパティを「fixed」に設定することで、列が特定の幅に従うように強制します。さらに、テーブルに 100% の幅を割り当てます。
2. calc() を削除し、パーセンテージを使用します: calc() の代わりに、残りの列に単純なパーセンテージを使用します。固定幅の列を決定し、その幅を割り当てます。残りのスペースは、相対幅の列に比例して配分されます。

CSS の例:

td.title, td.interpret {
    width: 40%;
}

td.album {
    width: 20%;
}

キー ポイント:

• table-layout を「固定」に設定すると、列幅が指定された値に従うようになります。
• 相対幅の列にパーセンテージを使用すると、残りのスペースを比例的に分配できます。
• テーブル レイアウトが機能するには Display:table が必要ですが、テーブルの高さを使用できません。

修正されたコード例:

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