Webページでテーブルの表示位置が変わっても1列目を固定してスクロールさせたい

前提・実現したいこと

サイドバー付きのWebページを作成しています。
デスクトップでの利用を前提としています。
表示されるものはトップメニュー、サイドバー、テーブルがあり、ブラウザのウィンドウ幅が小さくなるとサイドバーが閉じるようになっています。

テーブルは列、行ともにそこそこ数がありフルHDのモニターでは画面内に納まりません。
表示方法としてはヘッダーと1列目が固定したほうが見やすいので、見様見真似ですがなんとか実現できました。

発生している問題・エラーメッセージ

ウィンドウ幅を小さくすると、サイドバーが隠れてテーブルも左端に移動するようにしましたが、ここで固定していた1列目が動いてしまうようになりました。

該当のソースコード

抜粋したものになりますが挙動は同じです。

test.html

test.html
1<!DOCTYPE html>
2<html>
3
4<head>
5	<title>Test</title>
6	<link href="test.css" rel="stylesheet">
7</head>
8
9<body>
10<div class="content-page">
11<table>
12	<thead>
13		<tr>
14			<th class="sticky-ex" >AAAAA</th>
15			<th class="sticky-ex" >BBBBB</th>
16			<th class="sticky-ex" >CCCCC</th>
17			<th class="sticky-ex" >DDDDD</th>
18			<th class="sticky-ex" >EEEEE</th>
19			<th class="sticky-ex" >FFFFF</th>
20			<th class="sticky-ex" >GGGGG</th>
21			<th class="sticky-ex" >HHHHH</th>
22			<th class="sticky-ex" >IIIII</th>
23			<th class="sticky-ex" >JJJJJ</th>
24			<th class="sticky-ex" >KKKKK</th>
25		</tr>
26	</thead>
27	<tbody>
28		<tr>
29			<td class="sticky-ex" >AAAAAA01234</td>
30			<td>BBBBBB01234</td>
31			<td>CCCCCC01234</td>
32			<td>DDDDDD01234</td>
33			<td>EEEEEE01234</td>
34			<td>FFFFFF01234</td>
35			<td>GGGGGG01234</td>
36			<td>HHHHHH01234</td>
37			<td>IIIIII01234</td>
38			<td>JJJJJJ01234</td>
39			<td>KKKKKK01234</td>
40		</tr>
41	</tbody>
42</table>
43</div>
44</body>
45</html>

test.css

test.css
1
2th, td {
3	white-space: nowrap;
4}
5
6.content-page {
7	width: calc(100% - 250px);
8	transition: none;
9	position: absolute;
10	top: 50px;
11	right: 0;
12}
13
14.sticky-ex {
15	position: sticky;
16	top: 50px;		/* content-page より */
17	left: 250px;	/* content-page より */
18	z-index: 1;
19}
20
21.sticky-ex.fixed {
22	z-index: 2;
23}
24
25@media (max-width: 576px) {
26	.content-page {
27		width: 100%;
28	}
29
30	.sticky-ex {
31		left: -250px;
32	}
33}

期待した動作

ウィンドウ幅を小さくし、サイドバーが隠れテーブルが左端に移動したときも、テーブルをスクロールしても1列目を固定したいのですが、どのようにすればよろしいのでしょうか。

補足情報（FW/ツールのバージョンなど）

環境:Windows10
ブラウザ:Chrome

行動規範の内容に同意します

回答1件

ベストアンサー

これでどうでしょうか。

HTML
1<div class="content-page">
2<table>
3    <thead>
4        <tr>
5            <th class="sticky-ex" >AAAAA</th>
6            <th>BBBBB</th>
7            <th>CCCCC</th>
8            <th>DDDDD</th>
9            <th>EEEEE</th>
10            <th>FFFFF</th>
11            <th>GGGGG</th>
12            <th>HHHHH</th>
13            <th>IIIII</th>
14            <th>JJJJJ</th>
15            <th>KKKKK</th>
16        </tr>
17    </thead>
18    <tbody>
19        <tr>
20            <td class="sticky-ex" >AAAAAA01234</td>
21            <td>BBBBBB01234</td>
22            <td>CCCCCC01234</td>
23            <td>DDDDDD01234</td>
24            <td>EEEEEE01234</td>
25            <td>FFFFFF01234</td>
26            <td>GGGGGG01234</td>
27            <td>HHHHHH01234</td>
28            <td>IIIIII01234</td>
29            <td>JJJJJJ01234</td>
30            <td>KKKKKK01234</td>
31        </tr>
32    </tbody>
33</table>
34</div>

CSS
1@media (max-width: 576px) {
2    .content-page {
3        width: 100%;
4    }
5
6    .sticky-ex {
7        left: 0;
8    }
9}

投稿2022/01/05 07:52

harami_

総合スコア128

teigigoteatime

2022/01/05 08:14

早々のご返答ありがとうございます。 0にするのは気がつきませんでした。サイドバーは閉じるというよりマイナス値にして見えない位置に移動させているだったため、テーブル同じように移動させていました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！