ホームページ制作MATSUTE BLOG

この記事は「2021年01月02日」に書かれた記事です

1. 見出しの項目<th>が1列（縦）のパターン
2. 見出しの位置を変更する（横）→（縦）パターン
3. スクロールバーを表示させる（フリックでもOK）パターン

紹介するテーブルについて

• 下記のテーブルはレスポンシブ対応です。
• 768px以下の表示では、<td>を落としています。
  ※768は当ホームページ場合ですので、設定しているサイズによって変更が必要です。

1．見出しの項目<th>が1列（縦）のみのパターン

表示

769以上でのサイズの見え方（パソコン版）

768以下でのサイズの見え方（スマホ版）

実装

HTML

<table>
<tr>
<th>1</th>
<td>1-1<td>
<td>1-2<td>
</tr>
<tr>
<th>1</th>
<td>1-1<td>
<td>1-2<td>
</tr>
</table>

CSS

@media screen and (max-width: 768px) {

th,td {
width: 100%;
display:block;
}

}

• ※width:100%；の表記のみだと横幅いっぱいにならないことがあるので、横いっぱいに広げたいときには、display:blockを設定します。
• ※@media screen and (max-width: 768px)　は当サイトの場合です。メディアクエリについては、また別の記事で書きたいと思います。

見出しの位置を変更する（横）→（縦）

パソコンで見ているときは横長の表でもいいけど、スマートフォンで見るなら縦にした方が見やすいんだけどな

と思うことありまりませんか？そんな時は横と縦を反転させてしまいましょう

表示

769以上でのサイズの見え方（パソコン版）

768以下でのサイズの見え方（スマホ版）

実装

HTML

<table>
<tbody>
<tr>
<th> </th>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
</tr>
<tr>
<th>1</th>
<td>1a</td>
<td>1b</td>
<td>1c</td>
<td>1d</td>
<td>1e</td>
</tr>
<tr>
<th>2</th>
<td>2a</td>
<td>2b</td>
<td>2c</td>
<td>2d</td>
<td>2e</td>
</tr>
</tbody>
</table>

CSS

@media screen and (max-width: 768px) {

tr{
float:left;
width: 33%;
}
th,td {
-webkit-box-sizing: border-box;
box-sizing: border-box;
display:block;
height: 30px;
}
th:not(:first-child) th:first-child, td {
border-left: 1px solid #EEE;
}
tr:not(:first-child) th:first-child, td {
border-left: 1px solid #EEE;
}

}

上記の問題点は高さを決め打ちにしないといけないため、文章が複数行になる場合などの高さ調整が必要になることです。

3．スクロールバーを表示させるパターン

スクロールを表示させたいテーブルを<div class=”table-scroll”></div>内に表示させます。
※下記はスマートフォン版でスクロールを表示していますが、メディアクエリをはずせば、パソコン版でもスクロールが表示されるようになります。

表示

HTML

<div class="scroll">
<table>
<tbody>
<tr>
<th>項目1</th>
<th>項目2</th>
<th>項目3</th>
<th>項目4</th>
<th>項目5</th>
<th>項目6</th>
<th>項目7</th>
<th>項目8</th>
<th>項目9</th>
<th>項目10</th>
</tr>
<tr>
<td>項目1の内容</td>
<td>項目2の内容</td>
<td>項目3の内容</td>
<td>項目4の内容</td>
<td>項目5の内容</td>
<td>項目6の内容</td>
<td>項目7の内容</td>
<td>項目8の内容</td>
<td>項目9の内容</td>
<td>項目10の内容</td>
</tr>
</tbody>
</table>
</div>

CSS

@media screen and (max-width: 768px) {

.scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch; 
}

}

参考例はシンプルなので何とかなりますが、

横スクロールでもわかりにくな

という場合、頭を抱えてしまうこともあります。

また、項目と内容のバランスで、スクロースしているうちにこの列はなんの項目だったっけ？　とわからなくなってしまうこともあります。そんな時は、項目を固定して表示することもできます。

表示

HTML

<div class="sccroll">
<table class="sapm-table05">
<tbody>
<tr>
<th>項目1</th>
<td>項目1の内容</td>
<td>項目1の内容（2）</td>
<td>項目1の内容（3）</td>
<td>項目1の内容（4）</td>
<td>項目1の内容（5）</td>
<td>項目1の内容（6）</td>
<td>項目1の内容（7）</td>
<td>項目1の内容（8）</td>
<td>項目1の内容（9）</td>
</tr>
<tr>
<th>項目2</th>
<td>項目2の内容</td>
<td>項目2の内容（2）</td>
<td>項目2の内容（3）</td>
<td>項目2の内容（4）</td>
<td>項目2の内容（5）</td>
<td>項目2の内容（6）</td>
<td>項目2の内容（7）</td>
<td>項目2の内容（8）</td>
<td>項目2の内容（9）</td>
</tr>
</tbody>
</table>
</div>


CSS

.scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch; 
}

table {
width: 1500px;
border-top: 1px solid #CCC;
border-left:1px solid #CCC;
}

th {
width: 150px;
text-align: center;
background-color :#EEE;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
position: sticky;
left: 0;
}

th::before{
content: "";
position: absolute;
top: -1px;
left: -1px;
width: 100%;
height: 100%;
border: 1px solid #ccc;
}
td {
width: 150px;
background-color :#FFF;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}

thにposition: sticky；を付与してleft:0; で固定しています。

次にわかりやすいテーブルを作ってみましょう「4-10　CSSでテーブル（表）を分かりやすくしよう（近日公開予定）」