1. ホーム
  2. html

[解決済み] テーブルセルの最大幅をパーセンテージで設定するには?

2022-08-18 03:04:37

質問

<table>
<tr>
<td>Test</td>
<td>A long string blah blah blah</td>
</tr>
</table>

<style>
td{max-width:67%;}
</style>

上記はうまくいきません。テーブルセルの最大幅をパーセンテージで設定するにはどうしたらよいですか?

どのように解決するのですか?

によると の定義によると、最大幅は の定義によると、"テーブル、インラインテーブル、テーブルセル、テーブルカラム、カラムグループに対する 'min-width' と 'max-width' の効果は未定義である" とされています。なので、td要素に直接max-widthを設定することはできません。

もし、2番目の列が最大で67%を占めるようにしたいだけなら、例えば、例のケースでは、幅 (これは事実上、テーブルセルの最小幅です) を33%に設定することができます。

td:first-child { width: 33% ;}

両方の列にこれを設定すると、ブラウザが列を同じ幅にする傾向があるため、それほどうまくいきません。