HTML で最初の列と最初の行が固定されているテーブルをスクロールすると、下の画像のように、スクロールした列が最初の列を追い越してはみ出します。
スクロール後に突き出るのはなぜでしょうか。アドバイスをしていただけますと幸いです。
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;
}
<!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>