tableのスクロールについて

Question

テーブルの縦スクロールを表示しようとしてますが、各項目の幅が固定できずに困ってます。

<table id="table">
    <thead class="scrollHead">
        <tr class="">
            <th><input type="checkbox" id ="checkAll"/></th>
            <th>社員番号</th>
            <th>社員名</th>
        </tr>
    </thead>
    <tbody class="scrollBody">
        <tr class="list">
            <td class="checkboxParent">
                <input class="Select" type="checkbox"  name="chk1">
            </td>
            <td class="Data">1</td>
            <td class="Data">社員A</td>
        </tr>
        <tr class="list">
            <td class="checkboxParent">
                <input class="Select" type="checkbox"  name="chk1">
            </td>
            <td class="Data">2</td>
            <td class="Data">社員B</td>
        </tr>
    </tbody>
</table>

実際はtdは数百件のデータが入っています。
これに以下のcssを適用しています。

main #table{
    display: grid;
    grid-auto-flow: row;
    grid-auto-rows: 2.5em;
    width: 100%;
    height: 500px;
    overflow: scroll;
    grid-gap: 2px;
}
main #table th,td{
    width: 8%;
    min-width: 8%;
    max-width: 8%;
}
thead.scrollHead,tbody.scrollBody{
    display:block;
    width: 100%;
}
tbody.scrollBody{
    overflow-y:scroll;
    height:390px;
}

htmlにはチェックボックスと社員番号と社員名しか出してませんが、実際は１２項目表示しています。

これで実行するとスクロールが表示され、ヘッダ部も固定表示されるのですが、
ヘッダ部とデータ部にズレが出てます。
thとtdで同じ幅を指定しているのでズレは出ないと思ってました。
divで囲む方法等試してみたのですが、何故かヘッダ部のみズレてしまいます。
何か対処方法はあるでしょうか？

追記------------------------------------
cssのdisplay:gridを削除するとthタグも問題なく表示されます。
ただ、それを削除するとスクロールバーも表示されなくなりますが・・・。
何か他のcssと競合してるんでしょうか？

Comments

[x_x]

display: gridは必要なのでしょうか？

[limitman80]

これがないとスクロールバーが表示されませんでした。

[x_x]

blockでいいのでは？

[limitman80]

blockも試したのですが、結果は同じくズレが出ます。

[x_x]

ズレの話ではなく、スクロールバーの話ですが

[limitman80]

blockにしたらスクロールバーは表示されますが、thead部とtbody部のズレが発生します。各th、td１つずつにwidthを設定しても設定した値になりません。

[x_x]

ズレに関しては回答を参考にしてもらえれば解決します。グリッドレイアウトの必要性がなければ不要でしょう

Answer 1

テーブルのスクロールというよりヘッダの固定をしたいのだと思います。
過去に同様の質問があるので見てみてはいかがでしょうか？
https://teratail.com/questions/150020

Answer 2

thとtdで同じ幅を指定しているのでズレは出ないと思ってました。

divで囲む方法等試してみたのですが、何故かヘッダ部のみズレてしまいます。

スクロールバーの分ずれている、なんてことはありませんか？

Comments

[limitman80]

スクロールバーはテーブルの外に表示されてます。
スクロールバーの幅だけではないんですよ。ズレ幅は。
chromeのデバッグツールでtheadをクリックした時とtbodyをクリックした時に表示される横幅の値は同じなのですが、
その次のtrをクリックすると、tbody側はtbodyタグと同じ値なのに、
thead側のtrは3割ほど少ない値になってます。

thead tr:916
tbody tr:1323

1項目だけwidthを1%にするとtheadのtrが1323になります。
thのwidthが入りきってないってことでしょうか？