パーセンテージを使用して表のセルの最大幅を設定する方法

パーセンテージを使用した表のセルの最大幅の設定

表のセルにパーセンテージを使用して最大幅の制約を設定するのは難しい場合があります。次の例を考えてみましょう:

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

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

この場合、最大幅の設定は有効になりません。では、パーセンテージを使用してこれを実現するにはどうすればよいでしょうか?

解決策

解決策には、table 要素の table-layout プロパティを利用することが含まれます。 fixed に設定すると、表のセルのサイズを比例的に変更できます:

table {
  width: 100%;
  table-layout: fixed;
}

この CSS ルールにより、表の幅が利用可能なスペース全体を占め、表のセルの幅が調整されます。それに応じて。個々のセルの最大幅のパーセンテージ設定が適用されるようになりました。

例:

<table>

table-layout: fixed を追加すると、最大幅の制限が適用されます。 2 番目のテーブルのセルが効果的に適用され、親テーブルと比較して幅が減少します。

以上がパーセンテージを使用して表のセルの最大幅を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。