CSS おれおれ Advent Calendar 2012 – 17日目

例えば商品一覧。float:leftを駆使したりdisplay:inline-blockしたりと苦労が多いですが、表tableを使えたら楽チンですね。

使えたら楽だなーでもHTMLの意味を考えるとアレだよなーってな場合、HTMLのマークアップは適宜行いつつ、CSSでそれを表として扱わせる、という事ができます。

利用可能な環境

モダンブラウザーでは大丈夫。IEは8からサポートしています。

CSS的には2.1からあります。CSS 3でも記載はありますが、現時点では詳細はまだない (forthcoming) ようです。

HTMLのtable

HTMLで表tableを書くとこんな感じですね。

1
2
3
4
5
6
7
<table>
  <tr>
    <td>Foo</td>
    <td>Bar</td>
    <td>Boo</td>
  </tr>
</table>

CSSのdisplay:table

全部divに置き換え、CSSで指定する事ができます。

1
2
3
4
5
6
7
<div class="table">
  <div class="tr">
    <div class="td">Foo</div>
    <div class="td">Bar</div>
    <div class="td">Boo</div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
.table {
  display: table;
}
.tr {
  display: table-row;
}
.td {
  display: table-cell;
}

実は.td以外は、実は省略可能です。

1
2
3
<div class="td">Foo</div>
<div class="td">Bar</div>
<div class="td">Boo</div>
1
2
3
.td {
  display: table-cell;
}

HTMLでいきなり<td>を書く事は出来ませんが、CSSでは可能です。

display:table, display:table-rowを省略した場合、それらに該当する要素は暗黙的に存在するものとされます。

高さを揃える例

セルだけ

これだけで高さは揃います。

セルの幅を空ける

セル（の枠線）の間に隙間を空けるには、通常のtable要素と同じようにborder-spacingを指定します。指定先はtd要素ではなくtable要素なので、全体を括る必要があります。

行を増やす

さらにこのままセルを増やしても横に増えるばかりです。

縦に、行を増やすにはtr相当の要素が必要になります。

あんまりシンプルな感じにはなりませんね。あと一行ごとの項目数が固定になってしまうのも、float:left等と比べて見劣りします。

参考