表の項目だけ残してスクロールさせたい

Question

お世話になっております。
楽天のページでレスポンシブのサイズ一覧を作成したのですが、
縦と横にスクロールした時に「サイズ(〇〇用)」とその右の紫の部分の項目部分を固定し、
その下のサイズが重ならないようにしたいのですがどうすれば良いでしょうか？
表を移動するとその表の項目部分が固定されるようにしたいです。
また、スマホで見たときに表示される位置のデフォルトを女性用の"A"ではなく、
"D"の部分を表示するようにはできますでしょうか？
ページは下記になります。
https://www.rakuten.ne.jp/gold/********/item_size.html

Accepted Answer

ECマスターズの伊藤です。

> 縦と横にスクロールした時に「サイズ(〇〇用)」とその右の紫の部分の項目部分を固定し、
> その下のサイズが重ならないようにしたいのですがどうすれば良いでしょうか？

現在、「サイズ(〇〇用)」の箇所にのみ
position: sticky;
をご対応頂いていますが、

固定したい
「サイズ(〇〇用)」とその右の紫の部分の項目部分
に
position: sticky;
を適用、また、親要素（tabl）に
position: relative;
を追加することで、ご対応いただけます。

具体的なCSSは下記の通りとなります。


table {
	position: relative;
}
table th.fixed01,table th.fixed02 {
	position: sticky;
	top: 0;
}
th.fixed01 {
    z-index: 9999;
}


> また、スマホで見たときに表示される位置のデフォルトを女性用の"A"ではなく、
> "D"の部分を表示するようにはできますでしょうか？

申し訳ありませんが、こちらについては
方法を存じ上げません。

もし、どこかサイトなどで対応しているところがあれば、
確認させていただきますので、
URLをご連絡くださいませ。

Answer

ECマスターズ　伊藤さま

ご返信ありがとうございます。
項目がイメージどおりにきちんと固定されました！

スマホの表示部分をデフォルトから変える件は他に見たことがないので
できるかどうかご質問させていただきました。

ご丁寧に教えていただき、感謝いたします。