tableで2行固定したいとき

やりたいこと

このテーブルを上にスクロールしたときに、「固定不可」と書いてある部分を固定させたいのですが、
固定されずにスクロールされてしまいます。

ご教授お願いします。
以下のコードでは「固定可能」と書かれているところだけ固定してあります。

コード

html
1<div class="main">
2		<table class="items" border="1">
3			<thead>
4				<tr class="header">
5					<th rowspan="2">あああああああああああああああ</th>
6					<th rowspan="2">あああああああああああああああ</th>
7					<th colspan="5">あああ</th>
8					<th rowspan="2">あああああああああああああああ</th>
9					<th rowspan="2">あああああああああああああああ</th>
10					<th rowspan="2">あああああああああああああああ</th>
11					<th rowspan="2">あああああああああああああああ</th>
12					<th rowspan="2">あああああああああああああああ</th>
13				</tr>
14				<tr class="nest">
15					<td>いいいいい</td>
16					<td>いいいいい</td>
17					<td>いいいいい</td>
18					<td>いいいいい</td>
19					<td>いいいいい</td>
20				</tr>
21			</thead>
22			<tbody class="body">
23				<tr>
24					<td>ううう</td>
25					<td>ううう</td>
26					<td>ううう</td>
27					<td>ううう</td>
28					<td>ううう</td>
29				</tr>
30　　　　　　　　　　・・・・・・・・略
31			</tbody>
32		</table>
33	</div>

css
1.items thead th {
2	position:-webkit-sticky;
3	position:sticky;
4	top:0;
5	z-index:1;
6}

m.ts10806

2021/03/05 11:02

HTMLあまり半端にされない方が。列減らすとかでもう少しコピペで再現できるくらいにおさまりませんか？

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

回答1件

ベストアンサー

css
1.items thead th {
2    position:-webkit-sticky;
3    position:sticky;
4    top:0;
5    z-index:1;
6}
7/* 以下追加 */
8.items thead td {
9    position:-webkit-sticky;
10    position:sticky;
11    top:30px;
12    z-index:1;
13}