Question

我正面临着一个对齐表格的问题。我想要固定标题和表格的可滚动主体。我有对齐表格标题和正文使用

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

但是当我在桌面上使用上面的css时，所有对齐都会受到干扰。请告诉我有没有办法实现这个目标？提前谢谢..

[jsfiddle]（http://jsfiddle.net/saurabh07/7aj5fxmb/）

Answer 1

只是为每个表格行添加了不同的ID。

HTML

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

CSS

#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 {
}

标题固定且正文可滚动时表对齐

1 个答案: