ホームページ  >  記事  >  ウェブフロントエンド  >  Colgroup を使用してテーブル列のテキストを中央に配置するにはどうすればよいですか?

Colgroup を使用してテーブル列のテキストを中央に配置するにはどうすればよいですか?

Barbara Streisand
Barbara Streisandオリジナル
2024-10-30 17:39:03958ブラウズ

How to Center Text in Table Columns with Colgroups?

コルグループを使用してテーブル列のテキストを中央揃えにする

HTML テーブルの一般的な課題は、テキストを特定の列の中央に揃えることです。

を使用しているにもかかわらず、列内のすべてのセルを一貫して書式設定するには、テキストの配置が中央からずれたままになります。

問題の核心は CSS の制限にあります。列には、background-color を含む、選択されたいくつかの CSS プロパティのみが適用されます。残念ながら、text-align はその中にはありません。

このハードルを克服するには、別のアプローチが必要です。指定された例では、次の CSS ルールを追加すると、最初の列を除くすべてのテーブル セルのテキストが中央に配置されます:

<code class="css">#myTable tbody td { text-align: center }
#myTable tbody td:first-child { text-align: left }</code>

このソリューションは、text-align がテーブル セルに適用されるという事実を利用します。このメソッドは IE6 と互換性がないことに注意してください。しかし、興味深いことに、IE6 では text-align は実際には (間違っているとはいえ) 列に適用されます。

さらに、提供された HTML は が欠落しているため無効です。 内の要素。この小さな問題に対処すると、テーブル構造が HTML 標準に従って有効になることが保証されます。

以上がColgroup を使用してテーブル列のテキストを中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。