HTML 固定标头 - 将位置 th 与 td 对齐答案

【问题标题】：HTML Fixed header - Align position th at the same level as tdHTML 固定标头 - 将位置 th 与 td 对齐
【发布时间】：2020-10-07 00:34:18
【问题描述】：

我创建了一个带有固定标题和滚动的表格。它工作得很好，但表头对齐与表数据不匹配。我的意思是，结果应该是

--------------------
Id Heading2 Heading3
--------------------
 1  value1   value2
 2  value1   value2
 3  value1   value2

但在我的表格中，标题与表格数据不匹配，这意味着标题未正确对齐。这是我的Fiddle。我试过padding。但它没有用。那么，请帮助如何对齐标题以匹配相应的列？ JQuery 和 Javascript 解决方案也可以接受。

【问题讨论】：

标签： javascript jquery css html-table

【解决方案1】：

试试这个 CSS：

 thead >tr,th
    {
       border:none;
       padding:5px 20px 5px 10px;
       text-align: center;
       background-color:#0B3B17; 
       font-size:12pt;
    }
    td
    {
      border:none;
      color:#61210B; 
      text-align: center;
      padding: 3px 5px;
    }
    table
    {
     display: block ;
     height: 100px;
     overflow-y: scroll;
     width:400px;
     background-color: #ddd;
   }

【讨论】：

【解决方案2】：

试试这个：

html:

<table>
   <thead>
        <tr>
            <th class="id">Id</th>
            <th>Name</th>
            <th>Job</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="id">1</td>
            <td class="name">Raja</td>
            <td class="position">developer</td>
        </tr>
        <tr>
            <td class="id">2</td>
            <td class="name">Rajesh</td>
            <td class="position">associate consultant</td>
        </tr>
        <tr>
            <td class="id">2</td>
            <td class="name">Rajesh</td>
            <td class="position">associate consultant</td>
        </tr>
        <tr>
            <td class="id">2</td>
            <td class="name">Rajesh</td>
            <td class="position">associate consultant</td>
        </tr>
        <tr>
            <td class="id">2</td>
            <td class="name">Rajesh</td>
            <td class="position">associate consultant</td>
        </tr>
    </tbody>
</table>

css:

 thead tr th
{
    color:red;
    text-align:center;
    width:100px;
}
tbody
{
    position: absolute;
    height: 100px;
    overflow: scroll;
    background-color:red;
}
tbody tr td
{
    width:100px;
}
.id
{
    text-align:right;
}
.name, .position
{
    text-align:center;
}

【讨论】：

没有滚动仍然......但对齐正常
添加溢出：自动；在你的身体里。
您需要指定 tbody td 的宽度以使其与标题对齐。为了有一个卷轴，你需要让它绝对......