CSSの「sticky」で行を固定したいけれども固定されない

Question

PythonでFlaskを使ってシフト表を出力するアプリを作っています。
１ヶ月表示するので左端の名前部分と日付部分はスクロールしても固定したいと思い調べた結果
CSSにて「position: sticky;」を指定するというところは理解できました。
まず列の固定でtableの最初の項目に「fixedtable」というclassをつけて動くのを確認しました。
その後同じように行を固定しようと同じように「fixedcolumn」というclassをつけてみたところ全く動作せず詰まってしまいました。

以下の行動は試してみました。
・ググってみて「sticky」とは親要素内でしか動かないという仕組みの理解
・tbodyタグを作って「fixedcolumn」を入れて、thタグを指定してもダメ
・単独でthタグに「fixedcolumn」を入れるもダメ
・trタグに「fixedcolumn」を入れてthタグを指定するもダメ
・Bootstrapを導入しているためかと思い全てに！importantをつけてみたりもしましたが反応なし

一つのテーブルごとに１列目と２行目を固定したいというのが最終的な形となります。
不足情報などあれば追記します。
助言を頂ければと思います。
よろしくお願いします。

いただいたアドバイスを元に修正とテーブル部全体のコードも載せました。
現状やはり1行目と2行目の固定ができない状況です。

    {% set n = namespace(store = '') %}
    {% set m = namespace(shiftname = '') %}
    {% set l = namespace(loopcnt = 1) %}
    {% for post in posts %} 
    {% if n.store != post.store %}
    {% if not loop.first %}
    </tbody>
    </table>
    </div>
    {% endif %}
    <div class="table-responsive">
    <table class="table table-bordered border-primary">
        <thead class="fixedcolumn">
        <tr>
            {% for store in poststore %}
            {% if store.store_name == post.store %}
            <th class="fixedtable" style="width: 150px;"><a href="/store?store_no={{ post.store }}">{{ store.store_name }}</a></th>
            <th colspan={{ day_count }} style="text-align: left;">{{ store.shift_time }}</th>
            {% endif %}
            {% endfor %}
        </tr>
        <tr>
            <th class="fixedtable">氏名</th>
            {% for i in range(1,day_count+1) %}
                <th style="font-size: 0.75rem;">{{ i }}日</th>
            {% endfor %}
        </tr>
    </thead>
    <tbody>
    {% endif %}
        {% if m.shiftname != post.name %}
            <tr>
            <td class="fixedtable"><a href="/name?staff_name={{post.name}}">{{ post.name }}</a></td>
            <td>{{ post.shift }}</td>
            {% set l.loopcnt = l.loopcnt + 1 %}
        {% else %}
            {% if l.loopcnt == day_count %}
            <td>{{ post.shift }}</td>
            </tr>
            {% set l.loopcnt = 1 %}
            {% else %}
            <td>{{ post.shift }}</td>
            {% set l.loopcnt = l.loopcnt + 1 %}
            {% endif %}
        {% endif %}
        {% set m.shiftname = post.name %}
        {% set n.store = post.store %}
    {% endfor %}
    </table>
    </div>

thead tr{
  height: 60px;
}

.fixedcolumn tr:first-child th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: #202020 !important;
  color: white !important;
}

.fixedcolumn tr:nth-child(2) th {
  position: -webkit-sticky;
  position: sticky;
  top: 60px;
  background-color: #202020 !important;
  color: white !important;
}

.fixedcolumn tr:first-child th:first-child {
  z-index: 1;
}

.fixedcolumn tr:nth-child(2) th:first-child{
  z-index: 1;
}

.fixedtable {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  background-color: #202020 !important;
  color: white !important;
}

Answer 1

tableの列固定方法は「css table 列固定」などのキーワードで検索するとすぐ出てきます。
googleで検索すると以下のページがtopにでてきました。

[CSS] table の列固定に position: sticky を使用して背景色を指定すると、枠線が消えてしまう

この記事通り実装すれば1列目は固定できます。まずは1列目が固定できるようになってください。

2列目も固定するには、

• 2列目のtd,thに指定する left の値に1列目のwidthを加算する必要がある
• そのためには1列目のwidthを固定値で設定する

必要があるでしょう。

/* table要素に追加するプロパティ */
table{
  /* セル幅を固定するため、table-layoutをfixedに設定する */
  table-layout: fixed;
  /* table要素自体の幅も具体的に設定しないとセル幅の指定ができない */
  width: 900px;
}
/* td, thに追加するプロパティ */
td, th{
  /* セル幅を固定する */
  width: 150px;
}
/* 1列目要素の固定 */
.table-fixed th:first-child, .table-fixed td:first-child {
  position: sticky; 
  /* leftを指定しないと左に固定できない */
  left: 0;
}
/* 2列目要素の固定 */
.table-fixed th:nth-child(2), .table-fixed td:nth-child(2) {
  position: sticky; 
  /* 2列目のleftは1列目のwidth分加算して指定する */
  left: 150px;
}

htmlデータは上記のページをそのまま拝借しました。

<div class="table-parent">
  <table class="table-sample table-fixed">
  <thead>
    <tr><th>名前</th><th>番号</th><th>データ1</th><th>データ2</th><th>データ2</th><th>データ4</th></tr>
  </thead>
  <tbody>
    <tr><td>富山　一郎</td><td>A01234567</td><td>1234567890</td><td>1234567890</td><td>1234567890</td><td>1234567890</td></tr>
    <tr><td>石川　花子</td><td>ZX0000000</td><td>1234567890</td><td>1234567890</td><td>1234567890</td><td>1234567890</td></tr>
    <tr><td>福井　タカシ</td><td>QQQ9999999</td><td>1234567890</td><td>1234567890</td><td>1234567890</td><td>1234567890</td></tr>
  </tbody>
  </table>
</div>

codepenにも同様のデモを作ったので参考になれば。

https://codepen.io/haruyan-hopemucci/pen/poeEoOB

追記

1列目と「2行目」の複合固定が希望だったのですね。読み違えていました。
行側の固定も、列側と同じようにtd要素、th要素に対して position: sticky をつけ、適切にtop値を設定すれば複数行の固定も可能です。（2行目のtopは1行目のheightを加算していきます）
また、行側のヘッダと列側のヘッダが交差する場合どちらを上にするかは、z-indexを細かく設定して決めましょう。

コードが長くなったのでcodepenのデモで確認してください。同じpenに再実装しています。
https://codepen.io/haruyan-hopemucci/pen/poeEoOB
デモでは2行2列分の複合固定となっております。

Comments

[YouS2017]

二重固定のご教示ありがとうございます。行固定の際の参考にさせて頂きます！
ただすみません、今回列の固定はできていたんですが、行の固定ができず苦戦しております。
また表記の仕方も悪かったと思いますが１列目と２「行目」を最終的に固定させたいというのが今回の質問でした。

作っていただいたコードを見てテーブルをdivでくくってみたりもしましたがやはり行は固定できません。
列とは違う形で固定となるのでしょうか？
さまざまなページの情報を見て設定もしてみましたがうまくいきません。
色の指定は成功しているのでCSSが反映できていないわけではないと思うのですが…

[hope_mucci]

コメントを受けて複数の行と列を固定できるよう回答を修正しました。
修正中にBAが決まってしまいましたが、コードは参考になると思います。ご確認いただければ。

[YouS2017]

追記でのフォローありがとうございます！
細かなサポートページまで修正を頂き勉強になります。
デモページを見て細かな調整をしていければと思います。
根本を理解していないところがあったので精進していきます。

Answer 2

提示されたコードを見ると、1行目を固定したいのかなぁと思いました。勘違いだったらスルーしてください。

もし1行目を固定したいのであれば、fixedcolumnの方のセレクタを

.fixedcolumn tr:first-child th {

のように変えれば、1行目(tr)の全thにposition:stickyが適用されると思います。

また、この場合、htmlの、「氏名」と「○日」を出力しているtrを1行目に持ってくるのが自然な気がします(現状、最終行に来てます)。

で、1行目と1列目を固定することになるので、水平方向と垂直方向にスクロールしたとき、「氏名」が隠れないようにするため、下記の3行を追記しましょう。

.fixedcolumn tr:first-child th:first-child {
  z-index: 1;
}

Comments

[YouS2017]

コードの反映先の考え方勉強になりました、ありがとうございます！
それと列側を固定して日付が下に回るのもやりたかったことだったので助かります！

ただやはり上２行が固定できないようです…
一応1行目が店舗名とシフト情報、2行目が日付を表示するテーブルヘッダーとして作っています。
DBから引っ張ってきたデータをforとifで店舗ごとにテーブルを分ける関係で複雑な形になってしまっていますが、コードもテーブル全体のものを載せてみました。
上２行を固定したい（最悪日付行だけ残れば大丈夫）という状況です。
fixedcolumnをthead全体につけてもダメでした、何か根本的なところが間違っているのでしょうか？

[YouS2017]

```HTML
<div class="table-responsive">
<table class="table table-bordered border-primary">
<thead class="fixedcolumn">
```
このタグの位置をtheadからdivに動かしたらいけました。
```HTML
<div class="fixedcolumn">
<table class="table table-bordered border-primary">
<thead>
```
こちらで思った通りの動作となりました。
結果として最後の一押しは自分でしたがご助言頂いた２名の方のコードも理解が進み非常に助かりました。
ベストアンサーは仕組みの部分まで教えて頂いたgpsoftさんにさせて頂きました。

今までとにかく手探りで作業していたので知識の補完を今後は進めていくようにしていきます。
ありがとうございました！