93920


HTML で最初の列と最初の行が固定されているテーブルをスクロールすると、下の画像のように、スクロールした列が最初の列を追い越してはみ出します。

スクロール後に突き出るのはなぜでしょうか。アドバイスをしていただけますと幸いです。

* * *

[![enter image description
here](https://i.stack.imgur.com/1a65b.gif)](https://i.stack.imgur.com/1a65b.gif)

* * *
[code]

    table.crossLine td:nth-of-type(2n-1){
        background: whitesmoke;
    }
    
    .rowFixed {
        position: sticky; 
        top:      0;     
        z-index: 100;
    }
    
    .colFixed {
        position: sticky;
        left: 0;
        z-index: 101;
    
    }
    
    .fixed {
        position: sticky;
        top:      0;
        left: 0;
        z-index: 102; 
    }
[/code]

[code]

    <!DOCTYPE html>
    <html lang="ja"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    </head>
    <div class="container" style="margin-left: 5px; margin-right: 0px;">
        <div class="row">
            <div style="width:100%; overflow:scroll;">
                <table class="table table-bordered text-nowrap crossLine" style="table-layout: fixed" >
                    <thead class="thead-light bg-danger">
                    <tr>
                        <th class="xl65 bg-light fixed" style="height:15pt;width:120px;"></th>
                        <th class="bg-danger rowFixed" style="width:45px; ">1</th>
                        <th class="bg-danger rowFixed" style="width:45px; ">2</th>
                        <th class="bg-danger rowFixed" style="width:45px; ">3</th>
                        <th class="bg-danger rowFixed" style="width:45px; ">4</th>
                        <th class="bg-danger rowFixed" style="width:45px; ">5</th>
                        <th class="bg-danger rowFixed" style="width:45px; ">6</th>
                        <th class="bg-danger rowFixed" style="width:45px; ">7</th>
                        <th class="bg-danger rowFixed" style="width:45px; ">8</th>
                        <th class="bg-danger rowFixed" style="width:45px; ">9</th>
                        <th class="bg-danger rowFixed" style="width:45px; ">10</th>
                    </tr>
                    </thead>
                    <tbody><tr>
                        <th class="bg-danger colFixed" style="height:15pt;">A</th>
                        <td style="width:40px;" >0</td>
                        <td style="width:40px;" >0</td>
                        <td style="width:40px;" >0</td>
                        <td style="width:40px;" >0</td>
                        <td style="width:40px;" >0</td>
                        <td style="width:40px;" >0</td>
                        <td style="width:40px;" >0</td>
                        <td style="width:40px;" >0</td>
                        <td style="width:40px;" >0</td>
                        <td style="width:40px;" >0</td>
                    </tr>
                </tbody></table>
            </div>
        </div>
    </div>
    </body></html>
[/code]


CC BY-SA 4.0
2023-02-19T22:48:16.703
93911
2023-03-13T01:34:41.197
2023-02-20T01:10:53.370
3060
37868
question
html
HTMLのテーブルにおいてスクロール時に２列目がはみ出る原因


単純に、スクロールバーの操作によってテーブルが左に寄っただけです。  
`position: sticky` となっている `<th>` の奥には先祖の `<tr>` や `<thead>` があり、それらは `<th>`
のぶんの空間を確保したままですし、背景の色が指定されていれば描画されます。

この挙動を隠したいなら、テーブルの左端をスクロールコンテナの左端にぴったりくっつけましょう。


CC BY-SA 4.0
2023-02-20T06:53:27.477
93920
2023-02-20T06:53:27.477
3475
93911
answer


以下のhtmlに変更することで、はみ出る問題を解消できます。

[code]

    <!DOCTYPE html>
    <html lang="ja">
    
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    </head>
    <div class="container" style="margin-left: 5px; margin-right: 0px;">
      <div class="row">
        <div>
          <div style="width:100%; overflow:scroll;　margin-left: -5px;">
            <table class="table table-bordered text-nowrap crossLine" style="table-layout: fixed">
              <thead class="thead-light bg-danger">
                <tr>
                  <th class="xl65 bg-light fixed" style="height:15pt;width:120px;"></th>
                  <th class="bg-danger rowFixed" style="width:45px; ">1</th>
                  <th class="bg-danger rowFixed" style="width:45px; ">2</th>
                  <th class="bg-danger rowFixed" style="width:45px; ">3</th>
                  <th class="bg-danger rowFixed" style="width:45px; ">4</th>
                  <th class="bg-danger rowFixed" style="width:45px; ">5</th>
                  <th class="bg-danger rowFixed" style="width:45px; ">6</th>
                  <th class="bg-danger rowFixed" style="width:45px; ">7</th>
                  <th class="bg-danger rowFixed" style="width:45px; ">8</th>
                  <th class="bg-danger rowFixed" style="width:45px; ">9</th>
                  <th class="bg-danger rowFixed" style="width:45px; ">10</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <th class="bg-danger colFixed" style="height:15pt;">A</th>
                  <td style="width:40px;">0</td>
                  <td style="width:40px;">0</td>
                  <td style="width:40px;">0</td>
                  <td style="width:40px;">0</td>
                  <td style="width:40px;">0</td>
                  <td style="width:40px;">0</td>
                  <td style="width:40px;">0</td>
                  <td style="width:40px;">0</td>
                  <td style="width:40px;">0</td>
                  <td style="width:40px;">0</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    </body>
    
    </html>
    
[/code]

[code]

    table.crossLine td:nth-of-type(2n-1){
        background: whitesmoke;
    }
    
    .rowFixed {
        position: sticky; 
        top:      0;     
        z-index: 100;
    }
    
    .colFixed {
        position: sticky;
        left: 0;
        z-index: 101;
    
    }
    
    .fixed {
        position: sticky;
        top:      0;
        left: 0;
        z-index: 102; 
    }
    
[/code]


CC BY-SA 4.0
2023-03-13T01:33:49.590
94147
2023-03-13T01:34:41.197
2023-03-13T01:34:41.197
37868
37868
93911
answer