CSS calc() を使用して固定幅セルと可変幅セルを含むレスポンシブなテーブルを実現するにはどうすればよいですか?

calc() と固定幅セルを使用したテーブルのスタイリング

Web 開発では、データを整理するためにテーブルがよく使用されますが、可変内容セルの柔軟性を維持しながら、列に特定の幅を設定するのは困難です。ここで、CSS calc() 関数が役立ちます。

最初の列と最後の列など、特定の列に固定幅のセルを含むテーブルが必要なシナリオを考えてみましょう。残りのセルは可変幅になり、その内容に適応します。 calc() を使用すると、これらの可変幅セルの幅をテーブル内の残りのスペースのパーセンテージとして指定できます。

ただし、提供されているコード スニペットでは、内部で calc() を使用すると問題が発生する可能性があります。テーブル。これは、テーブルには、セルの内容を優先して列にスペースを配分するための特定のルールがあるためです。

この問題を解決して希望のレイアウトを実現するには、次のアプローチを使用できます:

1. テーブル レイアウトの設定: 固定;テーブル上: これにより、テーブルの子 td 要素が指定した幅に強制的に準拠し、固定幅のセルが指定された寸法のままになるようにします。
2. テーブルに固定幅があることを確認します。 width (この場合は 100%): 定義された幅は table-layout にとって重要です。
3. 残りの列にパーセンテージを使用します: 固定幅の列を考慮した後、パーセンテージを使用して残りの列に相対的な幅を割り当てることができます。たとえば、これらの列が残りのスペースの 40%、40%、20% を占めるようにする場合は、列の幅をそれぞれ 40%、40%、20% に設定します。

これらの手順に従うことで、calc() を利用して、固定幅の列の整合性を確保しながら、内容に適応して意図どおりに動作する固定幅のセルと可変幅のセルを含むテーブルを作成できます。

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