【HTML,CSS】レスポンシブ事に、横長のtableを横スクロール（スワイプ）させたい。

Question

前提・実現したいこと

レスポンシブ事に、横長のtableを横スクロール（スワイプ）させたい。

該当のソースコード

【html】

<table class="timetable"> <thead> <tr> <td class="td_0"></td> <th>月</th> <th>火</th> <th>水</th> <th>木</th> <th>金</th> </tr> </thead> <tr> <th class="fixed01">17:45~18:20</th> <td class="td_bg_blue">小１・小２<br>（avexダンス）</td> <td class="td_bg_yellow">小３・小４<br>（英語）</td> <td class="td_bg_blue">小１・小２<br>（英語）</td> <td class="td_bg_yellow">小３・小４<br>（avexダンス）</td> <td class="td_bg_blue">小１・小２<br>（英語）</td> </tr> <tr> <th class="fixed01">18:30~19:30</th> <td class="td_bg_yellow">小３・小４<br>（avexダンス）</td> <td class="td_bg_yellow">小３・小４<br>（プログラミング）</td> <td class="td_bg_blue">小１・小２<br>（avexダンス）</td> <td class="td_bg_yellow">小３・小４<br>（プログラミング）</td> <td class="td_bg_blue">小１・小２<br>（ダンス）</td> </tr> <tr> <th class="fixed01">19:40~20:40</th> <td class="td_bg_pink">小５・小６<br>（avexダンス）</td> <td>小５<br>（プログラミング）</td> <td class="td_bg_pink">小５・小６<br>（avexダンス）</td> <td>小６<br>（プログラミング）</td> <td class="td_bg_pink">小５・小６<br>（ダンス）</td> </tr> </table>

【css】

.timetable {
border-collapse: collapse;
border: 1px solid #707070;
margin: 50px 20px 45px 28px;
font-size: 14px;
font-weight: 600;
width: 996px;
overflow: auto;

th {
width: 166px;
height: 51px;
border: 1px solid #707070;
text-align: center;
padding-top: 19px;
background: #0084b1;
color: #fff;
}

.fixed01 {
position: sticky;
left: 0;
}

td {
width: 166px;
height: 51px;
border: 1px solid #707070;
text-align: center;
padding-top: 8px;
}

.td_0 {
border-top: 1px solid transparent;
border-left: 1px solid transparent;
}

.td_bg_blue {
background: #c8f0fd;
}
.td_bg_yellow {
background: #fdfdc8;
}
.td_bg_pink {
background: #fdc8f9;
}
}

試したこと

調べてみたけど全然分かりません…よろしくお願いします！

Comments

[hatena19]

CSSはSCSSですよね。SCSSをタグに追加してください。

[cx20]

少し気になったのですが、.timetable って入れ子になってたりします？意図した記述でしょうか？（CSS って入れ子使えましたっけ？）
.timetable {
　　th {
　　}
}

[cx20]

hatena19 さん、情報ありがとうございます。
SCSS だとネストが使えるのですね。勉強になります。

[yuuki45]

すみません！
SCSSです！

Answer 1

現状でヘッダー固定に対応しています。
画面をテーブル幅より狭くして横スクロールすればヘッダーは固定されてます。

おそらくご希望のことは、スクロールバーを画面下ではなく、テーブルのすぐ下に表示したいのだと思います。その場合は、テーブル全体をdivで囲みそれに overflow: auto; を設定すればいいでしょう。

<div class="fixedtable">
  <table class="timetable">

    略

  </table>
</div>

.fixedtable {
   overflow: auto;
  .timetable {
    border-collapse: collapse;
    border: 1px solid #707070;
    margin: 50px 20px 45px 28p;
    font-size: 14px;
    font-weight: 600;
    width:996px;

//略

  }
}

Comments

[yuuki45]

出来ました！ありがとうございました！