Question

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

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

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

Answer 1

试试这个：

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

Answer 2

试试这个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;
   }

HTML调整表头以匹配表数据

2 个答案: