CSS：表数据与表头不对齐

Question

我正试图用css和html制作一个响应表，如图所示。您可以看到标题与数据根本不一致。我试过把ad、tbody、tr和td或文本居中对齐，但都没用。如果你知道如何正确对齐，请告诉我。提前谢谢。

HTML:

<div class="container panel">
<h1 class="panel__title"><i class="fas fa-info-circle"></i> Relay Information</h1>
<table class="panel__table">
<thead>
<tr>
<th>Hop</th>
<th>From</th>
<th>By</th>
<th>With</th>
<th>Time</th>
</tr>
</thead>
<tbody id="hops">
<tr>
<td>1</td>
<td>-</td>
<td>10.140.188.3</td>
<td>HTTP</td>
<td>Tue, 25 Jan 2011 15:30:58 </td>
</tr>
<tr>
<td>2</td>
<td>-</td>
<td>10.141.116.17</td>
<td>SMTP</td>
<td>Tue, 25 Jan 2011 15:30:58 </td>
</tr>
<tr>
<td>3</td>
<td>-</td>
<td>po-out-1718.google.com</td>
<td>SMTP</td>
<td>Tue, 25 Jan 2011 15:30:58 </td>
</tr>
<tr>
<td>4</td>
<td>po-out-1718.google.com (72.14.252.155:54907)</td>
<td>cl35.gs01.gridserver.com</td>
<td>ESMTP</td>
<td>Tue, 25 Jan 2011 15:31:01 </td>
</tr>
</tbody>
</table>
</div>

CSS：

.panel {
margin: 20px auto;
}
.panel__title {
width: 100%;
background-color: var(--primary-color);
color: #fff;
padding: 10px 0 10px 25px;
border-radius: 25px 25px 0 0;
}
.panel__table {
display: block;
overflow-x: auto;
border-spacing: 0;
border: 3px solid var(--primary-color);
border-radius: 0 0 25px 25px;
padding: 13px;
}
table tbody {
display: table;
width: 100%;
}
.panel__table th,
.panel__table td {
text-align: left;
padding: 16px;
}
.panel__table td {
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
.panel__table tr:nth-child(even) {
background-color: #f5f5f5;
}

Answer 1

问题来自这种风格：

table tbody {
display: table;
}

把它取下来。

Answer 2

.panel {

}
.panel__title {
background-color: blue;
color: #fff;
padding: 10px 0 10px 25px;
border-radius: 25px 25px 0 0;
}
.panel__table {
display: block;

border-spacing: 0;
border: 3px solid blue;
}
#head{
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
width:100%;
}
.panel__table th,
.panel__table td {
padding: 16px;
}
.panel__table td {
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
.panel__table tr:nth-child(even) {
background-color: #f5f5f5;
}

<div class="container panel">
<h1 class="panel__title"><i class="fas fa-info-circle"></i> Relay Information</h1>
<table class="panel__table">
<thead id="head">
<tr>
<th>Hop</th>
<th>From</th>
<th>By</th>
<th>With</th>
<th>Time</th>
</tr>
</thead>
<tbody id="hops">
<tr>
<td>1</td>
<td>-</td>
<td>10.140.188.3</td>
<td>HTTP</td>
<td>Tue, 25 Jan 2011 15:30:58 </td>
</tr>
<tr>
<td>2</td>
<td>-</td>
<td>10.141.116.17</td>
<td>SMTP</td>
<td>Tue, 25 Jan 2011 15:30:58 </td>
</tr>
<tr>
<td>3</td>
<td>-</td>
<td>po-out-1718.google.com</td>
<td>SMTP</td>
<td>Tue, 25 Jan 2011 15:30:58 </td>
</tr>
<tr>
<td>4</td>
<td>po-out-1718.google.com (72.14.252.155:54907)</td>
<td>cl35.gs01.gridserver.com</td>
<td>ESMTP</td>
<td>Tue, 25 Jan 2011 15:31:01 </td>
</tr>
</tbody>
</table>
</div>