2012年8月28日(火) 11時46分50秒 [Web関連]

表（table）の縦一列をCSSで一括センタリングしたり右寄せしたりする方法

HTMLで表組みを作ったとき、列単位（縦方向単位）でセル内の文字列の表示位置を調整したいことがあります。例えば、名称を書く列をセンタリングしたいとか、面積や料金など数値を書く列を右寄せしたいとか。

文字列の表示位置は、text-alignプロパティで設定できるわけですが、表組みの列（縦方向）のすべてのセルに対して一括してセンタリングしたり右寄せしたりするには、ちょっと工夫が必要ですよね。colgroup要素やcol要素を使えば良いような気もしますが、どうもそれらの要素にtext-alignプロパティを指定しても無効になる（無視される）ようで、文字位置は調整されません。背景色とかなら、その方法で付加できるんですが。（CSS2 - 17 Tables - 17.3 Columns）

隣接セレクタを使って列を特定して、列単位でセンタリングや右寄せをする方法

CSSの「隣接セレクタ」を使って以下のような感じで記述すれば、列（縦方向）単位ですべてのセルの装飾を施せます。（横方向のセル数が多い表だと、何が何だか分からなくなりそうですが。^^;）

以下のようなCSS＋HTMLソースで、列（縦方向）のすべてのセルに対して、一括してセンタリングや右寄せなどの文字表示位置の調整ができます。

■CSSソース：

■HTMLソース：

上記のソースを表示させると、以下のように見えます。

上記のHTMLソースでは、4列×6行の表を作っています。
CSSソースでは、隣接セレクタを使って「何番目の列なのか」を特定しています。
その結果、各列は、

• 1列目（ th ）は、横幅50pxでセンタリング
• 2列目（ th + td ）は、横幅90pxでセンタリング
• 3列目（ th + td + td ）は、横幅75pxで右寄せ
• 4列目（ th + td + td + td ）は、横幅80pxで右寄せ

のように表示されます。（IE6以下は「隣接セレクタ」に対応していないので、上記の指定ようには見えませんが。^^;;;）

※CSSでセレクタに「+」記号を使って「A + B」のように記述すると、「AとBが隣り合っている場合のBに対してのみ適用する」という意味になります。詳しくは、「隣接セレクタ」でリファレンスを調べてみて下さい。(^_^;)
1列目には特に隣接セレクタは使っていませんけども。(^_^;)