表のセルの最大幅をパーセンテージで効果的に制御するにはどうすればよいですか?

テーブルセルの CSS 最大幅機能の拡張: パーセンテージの活用

HTML テーブルの領域では、最大幅を制御することが望ましいことがよくあります。特に長いテキストを扱う場合、またはデバイス間の互換性を確保する場合に、表のセルの幅を調整します。ただし、パーセンテージを使用して最大幅を設定すると、制限が発生する場合があります。

指定されたコード スニペット:

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

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

最大幅をパーセンテージとして表のセルに適用すると、それに応じて幅が直感的に調整されます。 。ただし、ブラウザの互換性の問題が発生し、一貫性のないレンダリングが発生する可能性があります。

これらの制限を克服するには、あまり知られていない解決策があります。それは、「table-layout」CSS プロパティです。 table タグに「table-layout:fixed」を設定すると、その中のすべてのセルに固定幅のレイアウトを確立できます。これにより、パーセンテージを使用してセルの最大幅を制御する一貫した信頼性の高い方法が提供されます。

table {
  width: 100%;
  table-layout: fixed;
}
td {
  max-width: 67%;
}

このアプローチでは、ブラウザの互換性の問題に関係なく、セルの最大幅をパーセンテージを使用して効果的に制御できます。実際の動作を確認するには、次の更新された Fiddle を参照してください: http://jsfiddle.net/Fm5bM/4/.

以上が表のセルの最大幅をパーセンテージで効果的に制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。