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

カテゴリー : 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>X</th>
            <th>Y</th>
        </tr>
    </thead>
    
    <tfoot>
        <tr class="total">
            <th>合計</th>
            <td>1,500</td>
            <td>3,300</td>
        </tr>
    </tfoot>
    
    <tbody>
        <tr>
            <th>A</th>
            <td>100</td>
            <td>1,000</td>
        </tr>
        <tr>
            <th>B</th>
            <td>200</td>
            <td>300</td>
        </tr>
        <tr>
            <th>C</th>
            <td>400</td>
            <td>400</td>
        </tr>
        <tr>
            <th>D</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,'MS Pゴシック',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

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

動作確認:IE6~, Firefox(最新), Chrome(最新)

コメントは受け付けていません。