テーブルデザイン – サンプル集

https://www.rural-web.com/coding/2493

2019/10/15

はじめに

本記事について

本記事は、【テーブル（table）のサンプル】をまとめたものです。
利用できる方は、お好きに活用してください。

当サイトで公開している「ruralweb.css（準備中）」をご自身のサイトに読み込ませておけば、各サンプルに指定されているクラスを挿入するだけで再現できることを目標にしています。もし個々に利用する場合は、各サンプルのソースをコピペしてご利用ください。

検証ブラウザ・OS

サンプル内容につきましては、最新ブラウザ・OS（IE/Chrome/Safari/FireFox/iOS/Android）で検証しております。基本的にIE9以下などのブラウザでは検証しておりませんが、たまに適用していたり説明してあるところは仕事でやむなく対応した時のものです。

注意事項

自身の仕事効率化を目的としていますので、表示・不具合等による損失につきまして一切の補償をいたしませんのでご理解ください。但し、公開しているサンプル内容の修正・改善はできる限りしていきますので、お気づきの点がございましたらTwitterよりご連絡ください。

コードサンプル

ベーシックタイプ

基本型

xxxx	xxxx
xxxx	xxxx
xxxx	xxxx

クラス名

rw-table-basic

説明

レスポンシブ対応
PC768px～は左右表示
スマホ～767pxは上下表示

コードを表示

<table class="rw-table-basic">
	<tbody>
	<tr>
		<th>xxxx</th>
		<td>xxxx</td>
	</tr>
	<tr>
		<th>xxxx</th>
		<td>xxxx</td>
	</tr>
	<tr>
		<th>xxxx</th>
		<td>xxxx</td>
	</tr>
	</tbody>
</table>

table.rw-table-basic {
    border-collapse: collapse;
	margin: 30px auto 0;
	width:100%;
	border:1px solid #ccc;
}
table.rw-table-basic th {
	background-color: #f3f8ff;
	padding: 20px;
	white-space: nowrap;
	font-weight:bold;
    text-align: left;
}
table.rw-table-basic td {
	padding: 10px;
}

table.rw-table-basic th,
table.rw-table-basic td {
	border-bottom:1px solid #ccc;
}
/* media query */
@media screen and (max-width: 767px){
table.rw-table-basic th {
	padding:10px 20px;
}
table.rw-table-basic td {
	padding:10px 36px;
}
table.rw-table-basic th,
table.rw-table-basic td {
	border-bottom: none;
	display: block;
	width: 100%;
}
}/* query end */

最終更新：2019.10.14

上見出しタイプ

基本型

#	aaa	bbb
001	aaaa	bbbb
002	aaaa	bbbb
003	aaaa	bbbb

クラス名

rw-table-head

説明

レスポンシブ対応
PC768px～は左右表示
スマホ～767pxはブロック表示
tdに対してtheadの項目をaria-dataに設定することで、SP表示時の見出し位置を再調整させている

コードを表示

<table class="rw-table-head">
	<thead>
	<tr>
		<th>#</th>
		<th>aaa</th>
		<th>bbb</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td aria-data="#">001</td>
		<td aria-data="aaa">aaaa</td>
		<td aria-data="bbb">bbbb</td>
	</tr>
	<tr>
		<td aria-data="#">002</td>
		<td aria-data="aaa">aaaa</td>
		<td aria-data="bbb">bbbb</td>
	</tr>
	<tr>
		<td aria-data="#">003</td>
		<td aria-data="aaa">aaaa</td>
		<td aria-data="bbb">bbbb</td>
	</tr>
	</tbody>
</table>

table.rw-table-head {
    border-collapse: collapse;
	margin: 30px auto 0;
	width:100%;
	border:1px solid #dbe1e8;
}
table.rw-table-head thead th {
	background-color: #f3f8ff;
	border-right:1px solid #dbe1e8;
	font-weight:bold;
	padding:10px;
}
table.rw-table-head thead th:last-child {
	border:0;
}
table.rw-table-head tbody td {
	padding:10px;
    border: 1px solid #dbe1e8;
}
table.rw-table-head tbody td:last-child {
	border-right:0;
}
/* media query */
@media screen and (max-width: 767px){

table.rw-table-head {
	border:0;
	font-size:13px;
}
table.rw-table-head thead {
	display:none;
}
table.rw-table-head tbody td {
	border:0;
	border-bottom:1px solid #dbe1e8;
    display: flex;
    justify-content: space-between;
}
table.rw-table-head tr,
table.rw-table-head td {
	display: block;
    width: 100%;
}
table.rw-table-head tr {
	margin-bottom:20px;
	border:1px solid #dbe1e8;
}
table.rw-table-head tr:last-child {
	margin-bottom:0;
}
table.rw-table-head td:nth-child(odd) {
	background-color:#f3f8ff;
}
table.rw-table-head td:before {
    content: attr(aria-data);
    display: inline-block;
    font-weight: bold;
    float: left;
    text-align: left;
    padding-right: 10px;
    min-width:60px;
}
table.rw-table-head td:last-child {
	border-bottom:0;
}
}/* query end */

最終更新：2019.10.14

更新履歴

更新日時	更新内容
2019.10.14	記事を作成