我怎么能使我的td和th有相同的宽度-包括滚动条只放在主体上?

Question

我需要一个可滚动的body。因此，我放了两张表，一张用于head，另一张用于tbody。

但是我不能找到一个方法使这两个表有相同的宽度

我知道有很多的解决方案在那里，使这些与一个表，但没有一个工作得很好-因为我需要有背景颜色头部-其他的解决方案有宽度，直到滚动条在右边，这不是我想要的

<table>
<thead>
<tr>
<th class="red">
Header 1
</th>
<th class="red">
Header 2
</th>
<th class="red">
Header 3
</th>
<th class="red">
Header 4
</th>
<th class="red">
Header 5
</th>
</tr>
</thead>
</table>
<table>
<tbody>
<tr>
<td class="red">Content 1</td>
<td class="red">Content 2</td>
<td class="red">Content 3</td>
<td class="red">Content 4</td>
<td class="red">Content 5</td>
</tr>

<tr>
<td class="red">Content 1</td>
<td class="red">Content 2</td>
<td class="red">Content 3</td>
<td class="red">Content 4</td>
<td class="red">Content 5</td>
</tr>
<tr>
<td class="red">Content 1</td>
<td class="red">Content 2</td>
<td class="red">Content 3</td>
<td class="red">Content 4</td>
<td class="red">Content 5</td>
</tr>
<tr>
<td class="red">Content 1</td>
<td class="red">Content 2</td>
<td class="red">Content 3</td>
<td class="red">Content 4</td>
<td class="red">Content 5</td>
</tr>

<tr>
<td class="red">Content 1</td>
<td class="red">Content 2</td>
<td class="red">Content 3</td>
<td class="red">Content 4</td>
<td class="red">Content 5</td>
</tr>

</tbody>
</table>

tbody {
display: block;
height: 50px;
overflow-y: scroll;
}
table {
border:1px solid red;
}
.red {
border:1px solid red;
}

Answer 1

表格固定标题和可滚动正文

https://www.geeksforgeeks.org/how-to-create-a-table-with-fixed-header-and-scrollable-body/

试试这些

请把它放在一张桌子上，而不是两张