PC表示で左端列が見出しとなる表組みの場合
表組みのレスポンシブ対応で最もシンプルなのは、単純に幅可変で伸縮するだけというもの。ただし、モバイル環境ではかなり横幅が狭くなることが予想されるため、列数はおおよそ3～4列以下、セル内のテキストもあまり長すぎないものに留めておかないと、モバイル環境で可読性が落ちてしまうので注意が必要である。
.table01 {
width: 100%; /* 親要素の幅いっぱいで伸縮 */
table-layout: fixed; /* 各セル幅を均等に保つ */
border-collapse: collapse; /* 隣り合うセルの罫線を重ねて表示 */
}
.table01 th, .table01 td {
border: 1px solid #ccc;
}表レイアウトの組み換え
PC表示で左端列が見出しとなる表組みの場合
左端列が見出しとなるタイプの表組みで列数が多くなる場合、モバイル用の表示では縦積み表示に変更すると、列数や情報量が比較的多くても情報を読みやすくすることができる。
表組みのセルを縦積みにするには、基本的にtr／th／tdなどtable要素を構成する各要素のdisplay値をblockなど表組み以外のものに変更することで実装する。表組みを構成する各要素はtable独自のdisplay値があるため、普通の表組み形式で見せたいPCレイアウトを標準として、SPレイアウト時にメディアクエリでdisplay値をblockに変更するよう上書きしたほうが良い。
@media screen and (max-width: 767px) { /* モバイルレイアウトでは縦積みになるように上書き */
.table02 tr, .table02 th, .table02 td { /* tr／th／tdのdisplay値をblockに変更 */
display: block; /* 縦積み化 */
margin-top: -1px; /* 罫線を重ねる */
text-align: left;
}
}PC表示で1行目で見出しとなる表組みの場合
1行目に見出し行が来る表組みもモバイル環境でも読みやすくする場合も、表組みの行列を入れ替えるように表示を切り替えるのが良い。この場合はSPレイアウト時の表組み（左端列が見出し）を標準とするほうがおすすめ。
trを横並びにするためにdisplay: flexを適用するが、その時の対象セレクタはtable要素ではなくtbody要素となる点に注意する。HTMLにtbody要素が明示されていなくても、ブラウザは内部的にtable要素の直下にtbody要素を自動的に生成してレイアウトするため、tr要素をflexアイテムとして横並びさせるのであればtbody要素に対してdisplay: flexを指定しておく必要がある。
（※隣り合うセルの中身のコンテンツ量にバラツキがあると高さが変わって表組み状態が崩れてしまう。これを防ぐにはJavaScriptで行ごとのセルに該当する要素の高さを動的に揃える処理が必要である）
/* PCレイアウトでtrが横並びとなるように上書き */
@media screen and (min-width: 768px) {
.table03 tbody{ /* 内部的にtable直下にはtbodyが補完されるのでtbodyを対象セレクタとする */
width: 100%;
display: flex;
}
.table03 tr {
display: block;
width: 20%;
margin-left: -1px;
}
.table03 th, .table03 td {
display: block;
width: 100%;
margin-top: -1px;
margin-left: -1px;
}
}表をスクロールで表示する
表全体を横スクロールする
表組み全体を横スクロールで閲覧できるようにする場合、対象のtable要素をdiv要素で囲み、親要素にoverflow-x: autoを指定しておくことで、横幅が不足した場合に自動的に横スクロールバーを出すという仕組みになる。
この手法を使う場合、原則として表組みの横幅は固定値となるように設定しておく必要がある。親要素の幅に応じて表組みの横幅が伸縮する状態だと、そもそも親要素の幅を超えてスクロールが発生する状態にならないためである。
<div class="tableWrapper">
<table class="table04">
～省略～
</table>
</div>.tableWrapper {
width: 100%;
padding-bottom: 10px;
overflow-x: auto; /* 中身がはみ出したら横スクロールバーを出す */
}
.table04 {
width: 940px; /* 中のテーブルサイズを固定幅にする */
table-layout: fixed;
border-collapse: collapse;
}見出し行・列のみ固定してスクロール
表の中で見出し行・列が固定されて残りのデータセルだけがスクロールするように見せるために、対象となるtable要素をdiv要素で囲み。その親要素にoverflow: autoを設定することで中の表が親要素の領域を超えた場合にスクロールが出るようにしておく。
次にスクロールする表組みのうち、1行目の見出し行と左端の見出し列だけがスクロールせず親要素の上端・左端に張り付いた形で固定されるようにするため、それぞれのth要素に対してposition: stickyを設定する。この時、包含ブロックである親要素の上端に張り付くようにするにはtop: 0;、左端に張り付くようにするにはleft: 0;を指定する。左上の見出しセルは上にも左にも固定する必要があるため、top: 0;とleft: 0;を両方指定しておく。
position: stickyが効かない環境で閲覧した場合には、枠内で表全体で縦横にスクロール表示されるだけで表の閲覧ができなくなるわけではない。
.tableWrapper {
width: 100%;
height: 300px; /*縦スクロールのために高さを固定*/
overflow: auto; /*stickyの包含ブロック化*/
}
.table05 {
width: 920px; /*横スクロールのために幅を固定*/
table-layout: fixed;
border-collapse: collapse;
}
.table05 th,
.table05 td {
padding: 10px;
border: 1px solid #ccc;
}
.table05 thead th {
position: sticky; /*粘着表示*/
top: 0; /*包含ブロックの上端に張り付き*/
z-index: 1;
background: #ddd;
}
.table05 thead th:first-child { /*左上の見出しセル*/
top: 0; /*包含ブロックの上端に張り付き*/
left: 0; /*包含ブロックの左端に張り付き*/
z-index: 2;
}
.table05 tbody th {
position: sticky; /*粘着表示*/
left: 0; /*包含ブロックの左端に張り付き*/
background: #f7f7f7;
}固定要素の罫線を補う
表組みのthをsticky表示しても罫線はスクロールしてしまい罫線分だけスクロールするコンテンツが見えてしまうため、疑似要素で罫線を補う。
.table05 thead th::before,
.table05 thead th:first-child::after,
.table05 tbody th::before {
content: "";
position: absolute;
z-index: 1;
display: block;
background: #ddd;
}
.table05 thead th::before {
left: 0;
top: -1px;
width: 100%;
height: 1px;
}
.table05 tbody th::before,
.table05 thead th:first-child::after {
left: -1px;
top: 0;
width: 1px;
height: 100%;
}