【コピペOK】ずっと使えるCSSで表組

CSS

WEBサイトを作るときにいつでも変わらず付いてくる「表組」。
ググればやり方はいろいろとあって、ULとLIタグを使ってCSSで組む方法もありますが、ULとLIは1つのサイトで他にもよく使うと思うので「TableとCSS」を組み合わせる方法が一番良さそうに思います。

レスポンシブで、表組の内容によって良さそうな方法を2つ紹介です。

レスポンシブで簡単に表組を作る

表組その1

PCで見たときと、スマホ(320px以下)で見たときいは以下。

tabel-css-table1

<実際のサンプル>

<thead>tableのヘッダー部分
<tbody>tableのボディ部分
<tfoot>tableのフッター部分

[css title=”css-レスポンシブ表組その1”]

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
table {
border-collapse: collapse;
width: 100%;
}
table th,
table td {
padding: 10px;
border: 1px solid #999;
}
table th {
background-color: #eee;
text-align: center;
width: 30%;
}
@media screen and (max-width: 320px) {
table {
border-top: 1px solid #999;
}
table td {
display: block;
text-align: center;
}
table th {
display: block;
border-top: none;
border-bottom: none;
width: 100%;
}
}
[/css]

[html title=”html-レスポンシブ表組その1”]
<table>
<tr>
<th>&lt;thead&gt;</th>
<td>tableのヘッダー部分</td>
</tr>
<tr>
<th>&lt;tbody&gt;</th>
<td>tableのボディ部分</td>
</tr>
<tr>
<th>&lt;tfoot&gt;</th>
<td>tableのフッター部分</td>
</tr>
</table>
[/html]

表組その2

PCで見たときと、スマホ(320px以下)で見たときいは以下。

tabel-css-table2

<実際のサンプル>

お部屋宿泊料金広さタイプその他
ダブル15,000円25m²洋室朝食付き
ツイン18,500円30m²和室朝・夕食付

[css title=”css-レスポンシブ表組その2”]

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
table {
border-top: 1px solid #999;
border-right: 1px solid #999;
border-collapse: collapse;
width: 100%;
}
table th,
table td {
border-left: 1px solid #999;
border-bottom: 1px solid #999;
padding: 10px;
}
table th {
background-color: #eee;
text-align: left;
}

@media screen and (max-width: 320px) {
table {
border: none;
}
table thead {
display: none;
}
table tr {
border-top: 1px solid #999;
display: block;
margin-bottom: 20px;
}
table td {
border-right: 1px solid #999;
border-bottom: 1px solid #999;
display: block;
padding: 10px;
text-align: right;
}
table td::before {
content: attr(data-label);
float: left;
font-weight: bold;
}
}
[/css]

[html title=”html-レスポンシブ表組その2”]
<table>
<thead>
<tr>
<th>お部屋</th>
<th>宿泊料金</th>
<th>広さ</th>
<th>タイプ</th>
<th>その他</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="お部屋">ダブル</td>
<td data-label="宿泊料金">15,000円</td>
<td data-label="広さ">25m²</td>
<td data-label="タイプ">洋室</td>
<td data-label="その他">朝食付き</td>
</tr>
<tr>
<td data-label="お部屋">ツイン</td>
<td data-label="宿泊料金">18,500円</td>
<td data-label="広さ">30m²</td>
<td data-label="タイプ">和室</td>
<td data-label="その他">朝・夕食付</td>
</tr>
</tbody>
</table>
[/html]

今回のポイントと
紹介アイテム

表組はいつでも出てくる表現方法です。毎度検索して、表示確認して・・・。意外と探すことが多いCSSの1つかと思います。紹介したCSSもググって探したのですが、しばらくはこのCSSを使うようにして制作時間を時短したいと思います!

参考&Special Thanks

下記の記事を参考にさせていただいたり、コードをそのまま、あるいは改造して使用させていただきました。

(参考)CSSだけでレスポンシブなテーブルデザイン3種