問題
スマートフォン時にテーブルを横スクロールにした時、左列を固定にするには？
解決策
「position: sticky」を、固定したい列のそれぞれのセルに設定する。
テーブルの項目が多い時に見やすくする。
スマートフォン時にテーブルを横スクロールにした時、左列を固定にできると、項目が多い時に見やすくすることができます。
今回は【position: sticky】を使って、テーブルの左列を固定にする方法をご紹介します。
DEMOはこちら
左1列を固定
← 横スクロールしてご覧ください →
| 項目 | 内容が入ります。 内容が入ります。 |
内容が入ります。 内容が入ります。 |
内容が入ります。 内容が入ります。 |
内容が入ります。 内容が入ります。 |
|---|---|---|---|---|
| 項目 | 内容が入ります。 内容が入ります。 |
内容が入ります。 内容が入ります。 |
内容が入ります。 内容が入ります。 |
内容が入ります。 内容が入ります。 |
| 項目 | 内容が入ります。 内容が入ります。 |
内容が入ります。 内容が入ります。 |
内容が入ります。 内容が入ります。 |
内容が入ります。 内容が入ります。 |
左2列を固定
← 横スクロールしてご覧ください →
| 項目 | 項目2 | 内容が入ります。 内容が入ります。 |
内容が入ります。 内容が入ります。 |
内容が入ります。 内容が入ります。 |
内容が入ります。 内容が入ります。 |
|---|---|---|---|---|---|
| 項目 | 内容が入ります。 内容が入ります。 |
内容が入ります。 内容が入ります。 |
内容が入ります。 内容が入ります。 |
内容が入ります。 内容が入ります。 |
|
| 項目 | 項目2 | 内容が入ります。 内容が入ります。 |
内容が入ります。 内容が入ります。 |
内容が入ります。 内容が入ります。 |
内容が入ります。 内容が入ります。 |
HTMLはこちら
- tableをdivで囲います。
- 固定したい列（今回は左列）のそれぞれのセルにクラス「fixcell」を設定します。
左1列を固定バージョン
<div class="twrapper">
<table>
<tbody>
<tr>
<th scope="row" class="fixcell">項目</th>
<td>内容が入ります。<br>内容が入ります。</td>
<td>内容が入ります。<br>内容が入ります。</td>
<td>内容が入ります。<br>内容が入ります。</td>
<td>内容が入ります。<br>内容が入ります。</td>
</tr>
<tr>
<th scope="row" class="fixcell">項目</th>
<td>内容が入ります。<br>内容が入ります。</td>
<td>内容が入ります。<br>内容が入ります。</td>
<td>内容が入ります。<br>内容が入ります。</td>
<td>内容が入ります。<br>内容が入ります。</td>
</tr>
<tr>
<th scope="row" class="fixcell">項目</th>
<td>内容が入ります。<br>内容が入ります。</td>
<td>内容が入ります。<br>内容が入ります。</td>
<td>内容が入ります。<br>内容が入ります。</td>
<td>内容が入ります。<br>内容が入ります。</td>
</tr>
</tbody>
</table>
</div>左2列を固定バージョン
<div class="twrapper">
<table>
<tbody>
<tr>
<th scope="row" class="fixcell">項目</th>
<th scope="row" class="fixcell">項目2</th>
<td>内容が入ります。<br>内容が入ります。</td>
<td>内容が入ります。<br>内容が入ります。</td>
<td>内容が入ります。<br>内容が入ります。</td>
<td>内容が入ります。<br>内容が入ります。</td>
</tr>
<tr>
<th scope="row" class="fixcell" colspan="2">項目</th>
<td>内容が入ります。<br>内容が入ります。</td>
<td>内容が入ります。<br>内容が入ります。</td>
<td>内容が入ります。<br>内容が入ります。</td>
<td>内容が入ります。<br>内容が入ります。</td>
</tr>
<tr>
<th scope="row" class="fixcell">項目</th>
<th scope="row" class="fixcell">項目2</th>
<td>内容が入ります。<br>内容が入ります。</td>
<td>内容が入ります。<br>内容が入ります。</td>
<td>内容が入ります。<br>内容が入ります。</td>
<td>内容が入ります。<br>内容が入ります。</td>
</tr>
</tbody>
</table>
</div>CSSはこちら
- テーブルを囲うdivに対し、「overflow: auto;」と「white-space: nowrap;」を設定してテーブルが幅から溢れたら横スクロールになるように設定します。
- 固定したい列のセルに設定したクラス「fixcell」に対し、「position: sticky;」を設定します。
- 2列目のセルも固定したい場合も加味し、クラス「fixcell」に対して「left: ○○px;」でセル1つ分左にずらしておき、さらに最初のクラス「fixcell」に「left: 0;」を設定して位置を戻します。
.twrapper{
overflow: auto;
white-space: nowrap;
}
.twrapper table{
width: auto;
}
.twrapper table th,
.twrapper table td {
min-width: 60px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.twrapper table .fixcell {
position: -webkit-sticky;
position: sticky;
left: 60px;
width: 60px;
min-width: 60px;
max-width: 60px;
}
.twrapper table .fixcell:first-child {
left: 0;
}
.twrapper table .fixcell[colspan="2"] {
width: 120px;
min-width: 120px;
max-width: 120px;
left: 0;
}
コメント