HTML　table　レスポンシブル対応　overflowでスクロール

2022 3/28

2022年3月28日 2022年4月11日

プレビューとデモ

プレビュー

tableタグの基本形

<table class="demo-table">
  <tbody>
    <tr>
        <th>ヘッダー1</th>
        <th>ヘッダー2</th>
        <th>ヘッダー3</th>
    </tr>
    <tr>
        <td>td:1-1</td>
        <td>td:1-2</td>
        <td>td:1-3</td>
    </tr>
    <tr>
        <td>td:2-1</td>
        <td>td:2-2</td>
        <td>td:2-3</td>
    </tr>
    <tr>
        <td>td:3-1</td>
        <td>td:3-2</td>
        <td>td:3-3</td>
    </tr>
    <tr>
        <td>td:4-1</td>
        <td>td:4-2</td>
        <td>td:4-3</td>
    </tr>
    <tr>
        <td>td:5-1</td>
        <td>td:5-2</td>
        <td>td:5-3</td>
    </tr>
 </tbody>
</table>

table.demo-table {
    display: table;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
    vertical-align: bottom;
    border-spacing: 0;
    border-collapse: collapse;
}

table.demo-table tbody tr th , table.demo-table tbody tr td {
    display: table-cell;
    width: auto;
    height: auto;
    margin: 0;
    padding: 10px;
    border: 1px solid black;
    box-sizing: border-box;
}

table.demo-table tbody tr:nth-child(2n) {
    background-color: #efefef;
}

table.demo-table tbody tr th {
    background-color: #4d4d4d;
    color: white;
}

右をoverflowでスクロールにする

スマホなどではtableが画面サイズにおさまらず、スクロールさせたいときには、上記の基本形を以下のように変更します。

tableを囲う親要素 #tableWrapを作る。(DEMOではwidth: 375px;にしています)
親要素にoverflow:scroll をつける。
tdやth要素にmin-widthをつける。

<div id="tableWrap">
  <table> ~~ </table>
</div>

/* 基本形に追記 */
div#tableWrap {
    width: 100%; 
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

table.demo-table tbody tr th, table.demo-table tbody tr td{
    min-width: 200px; /* スマホで横幅をはみださせた */
}

色を変えて装飾する

テーブルタグで行ごとにシマシマに色を変えるには以下のCSSを使うと便利です。

tdにclassを振って行うこともできるが、trに対して指定。
:nth-child(2n) または :nth-child(2n+1) などで偶数行、奇数行に対してcssを適用できる。

table.demo-table tbody tr:nth-child(2n) {
    background-color: #efefef;
}

tableのボーダーの処理

bleタグのボーダーは、普通に指定すると2重線になってしまう。
そこで以下のように指定することで簡単に格子状の重複のない線になります。

table {
    border-spacing: 0;
    border-collapse: collapse;
}

td{
    border: 1px solid black;
}

border-spacing: 0; は、table内のボーダーとボーダーの隙間のサイズが「０」ということで、
border-collapse:collapse; は、隣り合うボーダーは２重表示せずに１本にするということ。
そのうえで、tdに1pxのボーダーを指定すると、1pxの格子状のボーダーとなります。

レスポンシブtable サンプルコード

<div id="tableWrap">
	<table class="demo-table">
		  <tbody>
			    <tr>
			        <th>ヘッダー1</th>
			        <th>ヘッダー2</th>
			        <th>ヘッダー3</th>
			    </tr>
			    <tr>
			        <td>td:1-1</td>
			        <td>td:1-2</td>
			        <td>td:1-3</td>
			    </tr>
			    <tr>
			        <td>td:2-1</td>
			        <td>td:2-2</td>
			        <td>td:2-3</td>
			    </tr>
			    <tr>
			        <td>td:3-1</td>
			        <td>td:3-2</td>
			        <td>td:3-3</td>
			    </tr>
			    <tr>
			        <td>td:4-1</td>
			        <td>td:4-2</td>
			        <td>td:4-3</td>
			    </tr>
			    <tr>
			        <td>td:5-1</td>
			        <td>td:5-2</td>
			        <td>td:5-3</td>
			    </tr>
		 </tbody>
	</table>
</div>

*{
   margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box;
    vertical-align: top;
}

div#tableWrap {
    display:inline-block;
    width: 100%; 
    height:auto;

}

table.demo-table {
    display: table;
    width: 800px; /* 仮に横幅を設定　autoでもOK */
    height: auto;
    vertical-align: bottom;
    border-spacing: 0;
    border-collapse: collapse;
}

table.demo-table tbody tr th , table.demo-table tbody tr td {
    display: table-cell;
    width: auto;
    height: auto;
    padding: 10px;
    border: 1px solid black;
}

table.demo-table tbody tr:nth-child(2n) {
    background-color: #efefef;
}

table.demo-table tbody tr th {
    background-color: #4d4d4d;
    color: white;
}

table.demo-table tbody tr th, table.demo-table tbody tr td{
    min-width: 200px; /* 最小幅を設定することでスマホなどで右にはみ出した部分をスクロールで表示 */
}

/* スマホ用 CSS */
@media screen and (max-width: 620px) {
	div#tableWrap {
	    overflow-x: scroll;
	    -webkit-overflow-scrolling: touch;
	    overflow-scrolling: touch;
	}
}

Demo