CSS：表格数据与表格标题不一致答案

【问题标题】：CSS: Table Data doesn't line up with Table HeaderCSS：表格数据与表格标题不一致
【发布时间】：2022-01-11 04:35:29
【问题描述】：

我正在尝试使用 css 和 html as seen in this Image 制作一个响应式表格。您可以看到标题根本不与数据对齐。我已经尝试了所有方法，例如放置 thead、tbody、tr 和 td 或 text-align center，但没有任何效果。如果您知道如何正确对齐，请告诉我。提前致谢。

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;
}

【问题讨论】：

标签： html css html-table alignment text-align

【解决方案1】：

问题出在这种风格上：

table tbody {
    display: table;
}

删除它。

【讨论】：

【解决方案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>

【讨论】：