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

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

    はじめに

    本記事について

    本記事は、【テーブル(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 記事を作成