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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

582閲覧

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

teigigoteatime

総合スコア7

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2022/01/05 07:08

前提・実現したいこと

サイドバー付きの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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

これでどうでしょうか。

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にするのは気がつきませんでした。 サイドバーは閉じるというよりマイナス値にして見えない位置に移動させているだったため、テーブル同じように移動させていました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問