Webサイトデザインでテーブルを使う時にモバイル環境でも見やすく工夫しなければいけません。行や列が多いテーブルをCSSでスクール可能にして見やすく表示させる方法を実例とともにまとめています。
ヘッダーがあるtable、1行目を固定してスクロールする
1行目にtheadがあるテーブルの1行目を固定して縦にスクロール（スワイプ）できるようにします。
See the Pen table1行目がヘッダー by mixtaro (@mixtaro) on CodePen.
ラッパーでtableを囲む
table要素を囲むラッパーを用意します。
.table-wrapper{
overflow-y:auto;
max-width:200px;
}ラッパー要素にoverflow-yプロパティをautoにします。
max-widthプロパティで高さの最大値を指定しておきます。
テーブルがmax-widthで指定した高さ以上になった場合は縦スクロールが表示されます。
1行目を固定する position:sticky
1行目のテーブルヘッダーを固定します。
thead{
position:sticky;
top:0;
}See the Pen Untitled by mixtaro (@mixtaro) on CodePen.
行を固定するとスクロールした時にラインが消える
position:stickyで行や列を固定してスクロールしてみると、ボーダーが消えてしまうのが気になりませんか？
これを解決するには擬似要素を使います。
固定したth,td要素と同じ大きさの擬似要素を重ねてボーダーを設定します。
th擬似要素にborderを指定した場合：
thead th::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-bottom: 1px solid #B2967D;
}1列目を固定して横スクロールする
3列、4列と列数が多いテーブルの場合、セルの幅が狭まってかなり見づらくなります。横幅が狭いデバイスでも横にスクロール、スワイプして見えるようにします。
See the Pen Responsive table 列固定 by mixtaro (@mixtaro) on CodePen.
最初のth,tdを固定する
列を固定する場合は一番左の列になりますが列にはtheadのようなtableヘッダー要素はなく、thやtdどちらかになります。
テーブル各行（tr）の一番左の要素を指定するには:first-child擬似クラスを使います。
th:first-child,
td:first-child {
position: sticky;
left: 0;
}thとtdの最初の要素にposition:stickyを配置し、一番左に配置するのでleft:0;を指定します。
列をスクロールした時にボーダーが消えるのを補完する
行を固定した時と同様、列を固定してスクロールすると右ボーダーが消えてしまうのを防ぐため、擬似要素でボーダーを補完します。
th:first-child::before,
td:first-child::before {
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border-right:1px solid #ddd;
}行と列を固定して縦横にスクロールするtable
行だけ固定、列だけ固定を組み合わせれば、縦横にスクロールできるtableを実装できます。
See the Pen table 列行固定 by mixtaro (@mixtaro) on CodePen.
気をつけるのは、固定する行と列が交差する一番左上のセルです。縦にスクロールしても横にスクロールしても左上のセルが常に上にくるようにします。
既述の行固定、列固定と同じように、行、列にposition:stickyを設定します。
th {
position: sticky;
top:0;
left: 0;
}※今回の例では1行目・1列目にthでマークアップしているので行固定、列固定を一括で指定できます。
さらに1行目一番左、1列目一番上のセルにも改めてposition:stickyを指定し、常に一番上になるようにz-indexを指定します。
/* 1行目一番左、1列目一番上のセル */
thead th:first-child{
position:sticky;
top:0;
z-index: 1;
}レスポンシブデザイン時のテーブルレイアウトの参考になれば幸いです。
