テーブルの縦スクロールを表示しようとしてますが、各項目の幅が固定できずに困ってます。
html
1<table id="table"> 2 <thead class="scrollHead"> 3 <tr class=""> 4 <th><input type="checkbox" id ="checkAll"/></th> 5 <th>社員番号</th> 6 <th>社員名</th> 7 </tr> 8 </thead> 9 <tbody class="scrollBody"> 10 <tr class="list"> 11 <td class="checkboxParent"> 12 <input class="Select" type="checkbox" name="chk1"> 13 </td> 14 <td class="Data">1</td> 15 <td class="Data">社員A</td> 16 </tr> 17 <tr class="list"> 18 <td class="checkboxParent"> 19 <input class="Select" type="checkbox" name="chk1"> 20 </td> 21 <td class="Data">2</td> 22 <td class="Data">社員B</td> 23 </tr> 24 </tbody> 25</table>
実際はtdは数百件のデータが入っています。
これに以下のcssを適用しています。
css
1main #table{ 2 display: grid; 3 grid-auto-flow: row; 4 grid-auto-rows: 2.5em; 5 width: 100%; 6 height: 500px; 7 overflow: scroll; 8 grid-gap: 2px; 9} 10main #table th,td{ 11 width: 8%; 12 min-width: 8%; 13 max-width: 8%; 14} 15thead.scrollHead,tbody.scrollBody{ 16 display:block; 17 width: 100%; 18} 19tbody.scrollBody{ 20 overflow-y:scroll; 21 height:390px; 22}
htmlにはチェックボックスと社員番号と社員名しか出してませんが、実際は12項目表示しています。
これで実行するとスクロールが表示され、ヘッダ部も固定表示されるのですが、
ヘッダ部とデータ部にズレが出てます。
thとtdで同じ幅を指定しているのでズレは出ないと思ってました。
divで囲む方法等試してみたのですが、何故かヘッダ部のみズレてしまいます。
何か対処方法はあるでしょうか?