長いテキストによる表のセルの拡張を防ぐにはどうすればよいですか?

テキストの長さにかかわらず表のセルの拡張を防ぐ方法

一般的な表のレイアウトでは、列の幅は最長のセルの長さに合わせて調整されます。ただし、セル内のテキストに関係なく列幅を固定したい場合は、次の手順に従います。

解決策:

1. CSS を使用してセル幅を定義します。 : テーブル定義内の th 要素と td 要素の両方の幅 (例: 100px) を指定します。
2. Set table-layout を fix に変更: このプロパティにより、テーブルの幅が一定に保たれ、列の拡張が防止されます。表のサイズを完全に制御するには、表自体の幅を設定します (例: width: 200px)。
3. テキストのクリッピングを有効にする (オプション): テキストがセルの外に溢れるのを防ぐには、overflow: hidden を細胞

例:

table {
  table-layout: fixed;
  width: 200px;
}

th,
td {
  width: 100px;
  overflow: hidden;
}

<table>
  <tr>
    <th>header 1</th>
    <th>header 234567895678657</th>
  </tr>
  <tr>
    <td>data asdfasdfasdfasdfasdf</td>
    <td>data 2</td>
  </tr>
</table>

これらの手順に従うことで、テーブルの列幅が、セル内のテキストの長さ。このアプローチにより、テーブルのプレゼンテーションをより細かく制御できるようになり、レイアウトを混乱させる可能性のある不要な列の拡張を防ぐことができます。

以上が長いテキストによる表のセルの拡張を防ぐにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。