HTML固定标头-对齐位置在与td相同的水平上
HTML固定标头-对齐位置在与td相同的水平上
提问于 2013-12-03 06:09:11
我已经创建了一个具有固定标题和滚动的表。它工作得很好，但是表头对齐与表数据不匹配。我是说，结果应该是
--------------------
Id Heading2 Heading3
--------------------
1 value1 value2
2 value1 value2
3 value1 value2但在我的表中，标头与表数据不匹配，这意味着标头没有正确对齐。这是我的小提琴。我试过padding了。但没起作用。那么，请帮助如何对齐标题以匹配相应的列？JQuery和Javascript解决方案也可以接受。
回答 2
Stack Overflow用户
发布于 2013-12-03 06:39:21
试试这个：
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;
}Stack Overflow用户
发布于 2013-12-03 06:40:58
尝试这个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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20344077
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号