table装飾時に持っておきたいベーステンプレートとなるCSS

lifezakk

7 1月 2016

みなさんtableって結構使いますか？zakkは結構使っちゃいます。古いIEでもまぁ崩れずに表示されますので万能＝楽ですｗ
入れ子にしてはさすがに使いませんが、ちょっとした箇所に使ったりします。

今日はそんな時にすぐに取り出せるようベースとなるtableのCSSについて備忘録です。

tableベーステンプレートとなるCSS

HTML

HTMLは、下記の感じです。特出する点はございません。クラス名をtblなど指定しあとは普通に記述してください。
thにwidthを指定すると簡単に列の幅を固定指定し直せて便利です。ピクセル指定するとスマホで閲覧時にはみ出す可能性があるので、ここではパーセントで指定しておきます。

<table cellpadding="0" cellspacing="0" class="tbl" width="100%">
<tr>
<th width="25%">A</th>
<th width="25%">B</th>
<th width="25%">C</th>
<th width="25%">D</th>
</tr>
<tr>
  <td>ストロベリー</td>
  <td>アップル</td>
  <td>オレンジ</td>
  <td>バナナ</td>
</tr>
<tr>
  <td>ストロベリー</td>
  <td>アップル</td>
  <td>オレンジ</td>
  <td>バナナ</td>
</tr>
<tr>
  <td>ストロベリー</td>
  <td>アップル</td>
  <td>オレンジ</td>
  <td>バナナ</td>
</tr>
<tr>
  <td>ストロベリー</td>
  <td>アップル</td>
  <td>オレンジ</td>
  <td>バナナ</td>
</tr>
</table>

CSS

tableにcollapseを指定します。隣接する境界線を結合し表示させます。ブラウザによりseparateが初期値の場合もあるので、しっかり指定をします。trは、奇数行または偶数行の背景色を縞々にし見やすくします。th、tdは任意に装飾しましょう。

.tbl {
border-collapse: collapse;
border: 1px solid #ccc;
margin: 0 0 10px;
font-size:12px;
}
.tbl th {
background:#E5E5E5;
color:#222;
font-weight:bold;
border: 1px solid #ccc;
padding:5px;
}
.tbl td {
border: 1px solid #ccc;
padding:5px;
}
.tbl tr:nth-child(odd){
background:#fafafa;
}

実際のベースとなるテーブル

A	B	C	D
ストロベリー	アップル	オレンジ	バナナ
ストロベリー	アップル	オレンジ	バナナ
ストロベリー	アップル	オレンジ	バナナ
ストロベリー	アップル	オレンジ	バナナ

これだけでも、見栄えは良くなったと思います。後は適宜編集すればサクッと表ができますよね。
なお縞々部分はCSS3の擬似クラス:nth-child(n)となりIE8以下では未対応となります。