Javascript 表头固定且正文可滚动时的表格对齐
我面临一个表格对齐的问题。我需要固定的表头和可滚动的表体。我使用Javascript 表头固定且正文可滚动时的表格对齐,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我面临一个表格对齐的问题。我需要固定的表头和可滚动的表体。我使用 display:table-header-group 我在表体上使用了以下css属性 <tbody class="scrollablebody"> .scrollablebody { display: block; //if i remove then scroll bar is not coming..i need scroll bar overflow-y: auto; max
display:table-header-group
我在表体上使用了以下css属性
<tbody class="scrollablebody">
.scrollablebody
{
display: block; //if i remove then scroll bar is not coming..i need scroll bar
overflow-y: auto;
max-height: 200px;
}
.可滚动体
{
display:block;//如果我删除了,那么滚动条就不会出现..我需要滚动条
溢出y:自动;
最大高度:200px;
}
但当我在桌面上使用上述css时,所有对齐都会受到干扰。
请让我知道有没有办法做到这一点?提前谢谢
[jsfiddle]()只是向每个表行添加了不同的id HTML
@user3168736您检查过JSFIDLE吗?名字字段的扩展与其他字段类似。它在JSFIDLE中可见。请参阅我的答案,以获得我所知道的最佳解决方案。还有很多其他的答案可能会有帮助。如果我再添加一列,那么我必须再次设置宽度。我正在寻找一些通用的解决方案。
<tr>
<td id="name">Adam</td>
<td id="lastname">Gil</td>
<td id="id">0067</td>
<td id="country">Australia</td>
<td id="branch">Sydney</td>
<td id="location">Sydney AU</td>
<td id="cardno">67543</td>
<td id="percent">50%</td>
</tr>
#name {
width: 13.2%;
}
#lastname {
width: 12.9%;
}
#id {
width: 22.8%;
}
#country {
width: 10.5%;
}
#branch {
width: 9.3%;
}
#location {
width: 10.9%;
}
#cardno {
width: 10.5%;
}
#percent {
}