問題 × 解決策

テーブルの左列を固定にする方法【position: sticky】

問題

スマートフォン時にテーブルを横スクロールにした時、左列を固定にするには?

解決策

「position: sticky」を、固定したい列のそれぞれのセルに設定する。

 

テーブルの項目が多い時に見やすくする。

スマートフォン時にテーブルを横スクロールにした時、左列を固定にできると、項目が多い時に見やすくすることができます。
今回は【position: sticky】を使って、テーブルの左列を固定にする方法をご紹介します。

DEMOはこちら

左1列を固定

← 横スクロールしてご覧ください →

項目 内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
項目 内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
項目 内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。

左2列を固定

← 横スクロールしてご覧ください →

項目 項目2 内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
項目 内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
項目 項目2 内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。
内容が入ります。

HTMLはこちら

  1. tableをdivで囲います。
  2. 固定したい列(今回は左列)のそれぞれのセルにクラス「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はこちら

  1. テーブルを囲うdivに対し、「overflow: auto;」と「white-space: nowrap;」を設定してテーブルが幅から溢れたら横スクロールになるように設定します。
  2. 固定したい列のセルに設定したクラス「fixcell」に対し、「position: sticky;」を設定します。
  3. 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;
}

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

10 − 4 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧