I'm currently working on creating a table with a scrollbar within the body of the table. Below is the code I have written for this purpose. While the scrollbar functions properly, there seems to be an issue with the columns in the thead section. They appear significantly smaller than the columns in the tbody section which uses 100% of the width. Can anyone provide insight as to why the layout works correctly for the body but not the header?
<table style="width:100%;">
<thead style="width:100%;display:block;">
<tr>
<th style="width:70%;">Description</th>
<th>Task appears on</th>
</tr>
</thead>
<tbody style="width:100%; height:300px;overflow-y:scroll;display:block;">
<tr>
<td style="width:70%;">Test1</td>
<td> Test2</td>
</tr>
</tbody>
</table><table class="dash-task-list" style="width:100%;"><thead style="width:100%; display:block;"> <tr><th class="dash_description" style="width:70%;">Description</th><th class="dash_tasks_appear">Task appears on</th></tr></thead><tbody style="width:100%; height:300px; overflow-y:scroll; display:block;"></tbody></table>