colspanで結合したテーブルセル内(td)を中央寄せにするCSS

WEBのアイキャッチ WEB

colspanで結合したテーブルセル内(td)を中央寄せにするCSSを紹介します。

わたしの場合、td内を中央寄せする方法は知っていましたが、colspanをCSSで設定する方法は知りませんでした。

せっかくやり方を知ったので、メモ兼備忘録として残しておきたいと思います。

colspanで結合したテーブルセル内(td)を中央寄せにするCSS

まずは、何も設定していない表を見てみましょう。

colspanで結合したテーブルセルに何もCSSを設定していない状態

次にcolspanで結合したテーブルセル内(td)を中央寄せにしてみます。

td[colspan]{text-align:center;}
colspanで結合したテーブルセルに中央寄せのCSSを指定した状態

最後はおまけで、colspanで4つのセルを結合した時のみ中央寄せにするCSSです。

td[colspan="4"]{text-align:center;}
colspanで4つのセルを結合した時のみ中央寄せにするCSSを適用した表

思ったこととか

結合したセルを左寄せにするか、中央寄せにするかはともかく、指定方法を知っておいて損はないでしょう。

わたしの場合、WordPressテーマをハミングバードにしてから、ずっと気になっていたポイントなので、今回変更できてスッキリしました。

先延ばしにしていた点については、反省です。

Youtubeを始めました

メモトラPCチャンネル
https://www.youtube.com/channel/UCqOiuPy6lccc5JO_FQb_3gQ

レビュー動画をコツコツ上げて行くので、チャンネル登録をお願いします。

TOEIC対策はスタディサプリ ENGLISH

TOEICの勉強をするなら、スマホアプリで通勤・通学などのスキマ時間を利用するのがオススメです。

参考書とは違い場所も取りませんし、一日数分~数十分勉強すれば、チリツモで少しづつ知識を増やしていけます。

7日間の無料体験も用意されているので一度試してみてはいかがでしょうか?

スタディサプリ公式サイトを見る

スポンサーリンク