HTML テーブルで列幅の拡大を防ぐにはどうすればよいですか?

テーブルでの列幅の拡張の防止

多くの開発者は、テーブルを操作するときに、列の幅を一定に保つという課題に遭遇することがよくあります。 、セル内のテキストの長さに関係なく。この記事では、この問題に対処し、展開を無効にして列幅を設定する解決策を提供します。

問題を理解する

デフォルトでは、テキストが長さを超えると、テーブルセルの指定された幅に応じて、オーバーフローに対応するためにそれを含む列が拡張されます。この動作は、列幅の望ましい一貫性と矛盾します。

解決策: 列幅の安定性

この問題を解決するには、次の 2 つの CSS プロパティが重要です:

• table-layout:fixed: このプロパティはテーブル レイアウト モードを固定に設定し、次のことを保証します。列の幅は、セルの内容に関係なく一貫したままになります。
• width: このプロパティは、列の明示的な幅を設定します。

適切な CSS とともにこれらのプロパティを実装します。境界線と表の幅のスタイルを設定し、意図した目的を達成します。動作:

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

th,
td {
  border: 1px solid black;
  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>

このコードは、2 番目のヘッダー セルのテキストが大幅に長くなります。 overflow: hidden プロパティは、セル境界を越えてはみ出してしまう余分なテキストを隠します。

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