html　tableのヘッダ固定

下記のような形で、テーブルヘッダを指定しています。


<table class="table table-border">
    <thead>
        <tr class="table-title text-white">
            <th scope="col" rowspan="2">word1</th>
            <th scope="col" rowspan="2">word2</th>
            <th scope="col" rowspan="2">word3</th>
            <th scope="col">word4</th>
            <th scope="col">word5</th>
            <th scope="col">word6</th>
        </tr>
        <tr class="table-title text-white">
            <th scope="col">word7</th>
            <th scope="col" colspan="2">word8</th>
        </tr>
    </thead>
    <tbody>
        <tr class="bg-gray">
            <td height="80" class="py-0" rowspan="2">
                    <div class="but-area d-flex justify-content-around">
                    <button type="button" >選択</button>
                </div>
            </td>
            <td height="80" class="py-0" id='AgentID' rowspan="2"></td>
            <td height="80" class="py-0" id='AgentName' rowspan="2"></td>
            <td height="40" class="py-0" id='OfficeName'></td>
            <td height="40" class="py-0"></td>
            <td height="40" class="py-0"></td>
        </tr>
        <tr class="bg-gray">
            <td height="40" class="py-0"></td>
            <td height="40" class="py-0" colspan="2"></td>
        </tr>
        <tr class="bg-gray">
            <td height="80" class="py-0" rowspan="2">
                    <div class="but-area d-flex justify-content-around">
                    <button type="button" >選択</button>
                </div>
            </td>
            <td height="80" class="py-0" id='AgentID' rowspan="2"></td>
            <td height="80" class="py-0" id='AgentName' rowspan="2"></td>
            <td height="40" class="py-0" id='OfficeName'></td>
            <td height="40" class="py-0"></td>
            <td height="40" class="py-0"></td>
        </tr>
        <tr class="bg-gray">
            <td height="40" class="py-0"></td>
            <td height="40" class="py-0" colspan="2"></td>
        </tr>
        <tr class="bg-gray">
            <td height="80" class="py-0" rowspan="2">
                    <div class="but-area d-flex justify-content-around">
                    <button type="button" >選択</button>
                </div>
            </td>
            <td height="80" class="py-0" id='AgentID' rowspan="2"></td>
            <td height="80" class="py-0" id='AgentName' rowspan="2"></td>
            <td height="40" class="py-0" id='OfficeName'></td>
            <td height="40" class="py-0"></td>
            <td height="40" class="py-0"></td>
        </tr>
        <tr class="bg-gray">
            <td height="40" class="py-0"></td>
            <td height="40" class="py-0" colspan="2"></td>
        </tr>
        <tr class="bg-gray">
            <td height="80" class="py-0" rowspan="2">
                    <div class="but-area d-flex justify-content-around">
                    <button type="button" >選択</button>
                </div>
            </td>
            <td height="80" class="py-0" id='AgentID' rowspan="2"></td>
            <td height="80" class="py-0" id='AgentName' rowspan="2"></td>
            <td height="40" class="py-0" id='OfficeName'></td>
            <td height="40" class="py-0"></td>
            <td height="40" class="py-0"></td>
        </tr>
        <tr class="bg-gray">
            <td height="40" class="py-0"></td>
            <td height="40" class="py-0" colspan="2"></td>
        </tr>
        <tr class="bg-gray">
            <td height="80" class="py-0" rowspan="2">
                    <div class="but-area d-flex justify-content-around">
                    <button type="button" >選択</button>
                </div>
            </td>
            <td height="80" class="py-0" id='AgentID' rowspan="2"></td>
            <td height="80" class="py-0" id='AgentName' rowspan="2"></td>
            <td height="40" class="py-0" id='OfficeName'></td>
            <td height="40" class="py-0"></td>
            <td height="40" class="py-0"></td>
        </tr>
        <tr class="bg-gray">
            <td height="40" class="py-0"></td>
            <td height="40" class="py-0" colspan="2"></td>
        </tr>
        <tr class="bg-gray">
            <td height="80" class="py-0" rowspan="2">
                    <div class="but-area d-flex justify-content-around">
                    <button type="button" >選択</button>
                </div>
            </td>
            <td height="80" class="py-0" id='AgentID' rowspan="2"></td>
            <td height="80" class="py-0" id='AgentName' rowspan="2"></td>
            <td height="40" class="py-0" id='OfficeName'></td>
            <td height="40" class="py-0"></td>
            <td height="40" class="py-0"></td>
        </tr>
        <tr class="bg-gray">
            <td height="40" class="py-0"></td>
            <td height="40" class="py-0" colspan="2"></td>
        </tr>
        <tr class="bg-gray">
            <td height="80" class="py-0" rowspan="2">
                    <div class="but-area d-flex justify-content-around">
                    <button type="button" >選択</button>
                </div>
            </td>
            <td height="80" class="py-0" id='AgentID' rowspan="2"></td>
            <td height="80" class="py-0" id='AgentName' rowspan="2"></td>
            <td height="40" class="py-0" id='OfficeName'></td>
            <td height="40" class="py-0"></td>
            <td height="40" class="py-0"></td>
        </tr>
        <tr class="bg-gray">
            <td height="40" class="py-0"></td>
            <td height="40" class="py-0" colspan="2"></td>
        </tr>
        <tr class="bg-gray">
            <td height="80" class="py-0" rowspan="2">
                    <div class="but-area d-flex justify-content-around">
                    <button type="button" >選択</button>
                </div>
            </td>
            <td height="80" class="py-0" id='AgentID' rowspan="2"></td>
            <td height="80" class="py-0" id='AgentName' rowspan="2"></td>
            <td height="40" class="py-0" id='OfficeName'></td>
            <td height="40" class="py-0"></td>
            <td height="40" class="py-0"></td>
        </tr>
        <tr class="bg-gray">
            <td height="40" class="py-0"></td>
            <td height="40" class="py-0" colspan="2"></td>
        </tr>
        <tr class="bg-gray">
            <td height="80" class="py-0" rowspan="2">
                    <div class="but-area d-flex justify-content-around">
                    <button type="button" >選択</button>
                </div>
            </td>
            <td height="80" class="py-0" id='AgentID' rowspan="2"></td>
            <td height="80" class="py-0" id='AgentName' rowspan="2"></td>
            <td height="40" class="py-0" id='OfficeName'></td>
            <td height="40" class="py-0"></td>
            <td height="40" class="py-0"></td>
        </tr>
        <tr class="bg-gray">
            <td height="40" class="py-0"></td>
            <td height="40" class="py-0" colspan="2"></td>
        </tr>
        <tr class="bg-gray">
            <td height="80" class="py-0" rowspan="2">
                    <div class="but-area d-flex justify-content-around">
                    <button type="button" >選択</button>
                </div>
            </td>
            <td height="80" class="py-0" id='AgentID' rowspan="2"></td>
            <td height="80" class="py-0" id='AgentName' rowspan="2"></td>
            <td height="40" class="py-0" id='OfficeName'></td>
            <td height="40" class="py-0"></td>
            <td height="40" class="py-0"></td>
        </tr>
        <tr class="bg-gray">
            <td height="40" class="py-0"></td>
            <td height="40" class="py-0" colspan="2"></td>
        </tr>
        <tr class="bg-gray">
            <td height="80" class="py-0" rowspan="2">
                    <div class="but-area d-flex justify-content-around">
                    <button type="button" >選択</button>
                </div>
            </td>
            <td height="80" class="py-0" id='AgentID' rowspan="2"></td>
            <td height="80" class="py-0" id='AgentName' rowspan="2"></td>
            <td height="40" class="py-0" id='OfficeName'></td>
            <td height="40" class="py-0"></td>
            <td height="40" class="py-0"></td>
        </tr>
    </tbody>
</table>

<style>

.table-title {
  height: 40px !important;
}
.table-title th {
  padding: 0 !important;
}
.table thead th {
  border-top: 0;
  border-bottom: 0;
}
.table th {
  background-color: #707070;
  text-align: center;
  padding: 10px 0;
  font-weight: normal;
}
thead tr th {
  position: sticky;
  top: 0;
}
.table td,
.table th {
  vertical-align: middle !important;
}
.table-border td,
.table-border th {
  border: 1px solid #707070;
}

</style>

ヘッダの中が入れ子構造になっているからだと思いますが、
下記のようなテーブルヘッダを固定するcssを指定しても、
スクロール時に、word7,word8部分が固定されず、動いてしまいます。

thead tr th {
  position: sticky;
  top: 0;
}

どのように指定すれば、入れ子構造のヘッダを固定することができるのでしょうか？
ご存知の方、教えてくださると幸いです。
よろしくお願いいたします。

【追記】
ブラウザ：chromeです。
よろしくお願いいたします。

miyabi_pudding

2020/02/05 04:08 編集

下記を質問文修正で行ってください。・HTMLは省略しないでください。省略していないなら、theadを裸にしての記載はHTMLの文法違反なので、修正してください。（省略すると、第三者が再現できない、そもそも正しくレンダリングされない）・対象ブラウザを記載してください。ブラウザによって実装方法変わる場合あります。・参考にした記事があればリンクを記載してください。あと、一つ目のtrの閉じはつけた方がいいかと。（HTML5で許可されているものの、下のtrの閉じがある、他の要素の閉じがあるのとで統一した方がいい。ブラウザによっては正しくレンダリングされないケースがある）質問文は修正できるので、質問文に、上記を記載・実行してください。

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

回答1件

ベストアンサー

本当はtheadにstickyを当てればいいのですが、現状のブラウザ対応が厳しいので、

css
1thead tr th {
2  position: sticky;
3  top: 0;
4}
5thead tr:nth-child(2) th {
6  top: 30px;
7}

のように高さを指定してしまうしかないと思います。
ヘッダ行の高さが成り行きであるなら、JavaScriptを使わないと難しいかと。

投稿2020/02/05 04:29

Lhankor_Mhy

総合スコア36960

miyawaki

2020/02/05 04:39

ありがとうございました、解決しました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.35%

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

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

質問する

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

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

html　tableのヘッダ固定

関連した質問