CSSだけでテーブルを１段上のデザインにする方法

2012年12月9日カテゴリー : HTML / CSS

CSSだけで見栄えの良い綺麗なテーブルレイアウトをする方法のメモ。

実装の流れ

1. tableタグ全体に1pxのborder-topとborder-leftを指定。
2. table内のそれぞれのセル(th, td)に1pxのborder-bottomとborder-rightを指定。
3. 目立たせたいセル(th)にbackground-colorと、1pxのborder-top,border-leftを白(#FFF)で指定。

htmlソース

<table class="tips-table1" summary="表" cellspacing="0">

    <thead>
        <tr>
            <th></th>
            <th>Ｘ</th>
            <th>Ｙ</th>
        </tr>
    </thead>
    
    <tfoot>
        <tr class="total">
            <th>合計</th>
            <td>1,500</td>
            <td>3,300</td>
        </tr>
    </tfoot>
    
    <tbody>
        <tr>
            <th>Ａ</th>
            <td>100</td>
            <td>1,000</td>
        </tr>
        <tr>
            <th>Ｂ</th>
            <td>200</td>
            <td>300</td>
        </tr>
        <tr>
            <th>Ｃ</th>
            <td>400</td>
            <td>400</td>
        </tr>
        <tr>
            <th>Ｄ</th>
            <td>800</td>
            <td>1,600</td>
        </tr>
    </tbody>

</table>

cssソース

table.tips-table1 {
	margin-bottom: 1em;
	border-top: 1px solid #e7e7e7;
	border-left: 1px solid #e7e7e7;
	border-spacing: 0;
	border-collapse: separate;
	cellspacing: 0;
	empty-cells: show;
	font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

table.tips-table1 th,
table.tips-table1 td {
	padding: 6px;
	border-right: 1px solid #e7e7e7;
	border-bottom: 1px solid #e7e7e7;
}

table.tips-table1 th {
	text-shadow: #E9F0F3 1px 1px 0;
	width: 165px;
	font-weight: normal;
}

table.tips-table1 td {
	width: 150px;
}

table.tips-table1 thead th {
	background: #ceeed6;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	text-align: center;
}

table.tips-table1 tbody th {
	background: #e6f8e8;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	text-align: right;
}

table.tips-table1 tfoot th {
	background: #ceeed6;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	text-align: center;
}

table.tips-table1 tfoot td {
	background: #ffffee;
}

table.tips-table1 td {
	text-align: right;
}

table.tips-table1 .hide {
	empty-cells: hide;	
}

table.tips-table1 tfoot tr {
	border-top: 1px solid #fff;
	
}

table.tips-table1 tfoot th {
	text-align: right;
}

サンプル

	Ｘ	Ｙ
合計	1,500	3,300
Ａ	100	1,000
Ｂ	200	300
Ｃ	400	400
Ｄ	800	1,600

ステップ２の処理が陰、ステップ３の処理がハイライトで光っているように見え、少しだけ浮き上がったような上品なデザインになる。
楽して綺麗な表を作りたいときに便利、かも。

動作確認：IE6～, Firefox(最新), Chrome(最新)