What causes the second row to stick out when scrolling in HTML tables?

If you scroll through a table with the first column and the first row fixed in HTML, the scrolling column will overtake the first column as shown in the image below.

Why does it stick out after scrolling?I would appreciate it if you could give me some advice.

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/[email protected]/dist/css/bootstrap.min.css"rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLim9Nao0Yz1ztcQTwFspd3yD65VohpuCOmLASjjCross="gross" ""
</head>
<div class="container" style="margin-left:5px;margin-right:0px;">
    <div class="row">
        <div style="width:100%;overflow:scroll;">
            <table class="table table-border text-nowrap crossLine" style="table-layout:fixed">
                <thead class="thead-light bg-danger">
                <tr>
                    <th class="xl65bg-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>

html

2023-02-20 14:44

1 Answers

Simply, the scrollbar moved the table to the left.
position:sticky <th> and thead> of ancestors are located behind <th>, which remain in space for <th> and are drawn with the background color specified.

If you want to hide this behavior, stick the left end of the table to the left end of the scroll container.

2023-02-20 18:29

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656