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

Posted 2023-03-05

【中文标题】CSS：表格数据与表格标题不一致

【英文标题】：CSS: Table Data doesn't line up with Table Header

【发布时间】：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;

【参考方案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>