CSS: Table 数据不符合 Table Header

Question

我正在尝试使用 css 和 html as seen in this Image 制作响应式 table。您可以看到 headers 根本不与数据对齐。我已经尝试了一切，比如将 thead、tbody、tr 和 td 或 text-align 居中，但没有任何效果。如果您知道如何正确对齐，请告诉我。提前致谢。

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>

CSS: Table 数据不符合 Table Header

CSS: Table Data doesn't line up with Table Header

html

css

html-table

alignment

text-align