セルの内容の長さに関係なく、HTML でテーブルの列幅を維持するにはどうすればよいですか?

セルの内容の長さにかかわらず表の列幅を維持する

表形式の表現では、テキストに関係なく一貫した列幅を維持することが望ましいことがよくあります。セル内の長さ。ただし、HTML テーブルのデフォルトの動作では、長いコンテンツを収容できるように列幅を拡張できます。

この自動拡張を無効にして列幅を固定するには、次の手順に従います。

1. 該当する列内の th (テーブル ヘッダー) 要素と td (テーブル データ) 要素の両方の width プロパティを使用して、目的の列幅を指定します。例:

th, td {
  width: 100px;
}

2. テーブルの table-layout プロパティを「fixed」に設定します。これにより、指定された列幅が強制的にブラウザに指示されます:

table {
  table-layout: fixed;
}

3. 潜在的なテキストのオーバーフローがテーブルの外にこぼれるのを防ぐには、overflow: hidden; を追加します。プロパティを th 要素と td 要素に追加します:

th, td {
  overflow: hidden;
}

4. テーブルとそのセルのすべての境界線とサイズが、HTML 属性ではなく CSS を使用して定義されていることを確認します。

これらの手順に従うことで、個々のテキストの長さに関係なく、HTML テーブルの列幅を一定に維持できます。細胞。

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