css - テーブル幅の制限

Question

最大幅 700px の html テーブルがあり、列数 (3 ～ 10) がわかりません。<th>すべての要素に 5px のパディングを設定したいのですが、これによりテーブルの幅が広くなり、そこにある div に水平スクロールバーが表示されます。

列数がわからないため、パディングによって追加された余分なピクセルを合計幅から差し引くことはできません。

オーバーフロー値を div に配置しても、700px を超える列が不明瞭になるだけなので意味がありません。

テーブルの幅に適切なハード制限を設定するために、これを回避する方法はありますか?

Answer 1

以下のCSSを使用すると、テーブルが定義した最大サイズを超えないようにする必要があります。

table{
  table-layout:fixed;
}

Answer 2

これに対する最善の解決策は、現在使用しているものです。

列の数を予測できないため、各列に幅を設定することはできません。したがって、親 div のオーバーフローを auto に設定し、子テーブルの幅を 100% に設定するのが最善の解決策です。

Answer 3

テーブルの幅を 100% に設定し、その親 div の幅を 700px に設定します。

Answer 4

パディングを何に設定していますか？

テーブルに幅を設定し、 tdにパディングを設定すると、必要なものを正確に取得できるはずです。