HTML テーブルの列幅の拡大によるテキスト オーバーフローを防ぐにはどうすればよいですか?

テキスト オーバーフローにもかかわらずテーブルの列幅を制御する

多くの開発者は、テキスト セルのオーバーフローを処理するときに HTML テーブルで列幅が拡大するという問題に直面しています。この問題に対処するには、セルの内容の長さに関係なく、一貫した列幅を維持することが重要です。

この課題を克服するには、次のアプローチをお勧めします:

1. 列を指定幅: CSS を使用して、「幅」を使用して各列セルに希望の幅を指定します。 property.
2. テーブル レイアウトの修正: テーブルの "table-layout" プロパティを "fixed" に設定します。これにより、個々のセルが指定された幅をオーバーライドすることがなくなります。
3. セル展開を無効にする: ヘッダー ("th") とデータ ("td") の両方の "overflow" プロパティを "hidden" に設定します。 ) 細胞。これにより、列幅を広げるのではなく、余分なテキストがセル内に残るようになります。

これらの推奨事項を組み込んだ CSS コードの例を次に示します。

table {
  border: 1px solid black;
  table-layout: fixed;
  width: 200px;
}

th,
td {
  border: 1px solid black;
  width: 100px;
  overflow: hidden;
}

これらの設定を使用では、テキスト セルに過剰なコンテンツが含まれている場合でも、列幅は 100 ピクセルに固定されます。 CSS を使用して境界線とサイズを調整することで、外観をさらに向上させることができます。

以上がHTML テーブルの列幅の拡大によるテキスト オーバーフローを防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。