我在可滚动的div中有一个引导表。用div包装表格有助于我解决th和td对齐问题,但是与此同时,我的表格标题也会滚动显示,我希望它们得到修复。
<div class="table-wrapper">
<table class="table" id="tblfiles">
<thead>
<tr>
<th data-field="Date" class="col-md-2" style="width:100vw;">Alert Date</th>
<th data-field="Files" class="col-md-2" style="width:100vw;">Files</th>
<th data-field="fileName" class="col-md-2" style="width:100vw;">Received Time</th>
<th data-field="ReceivedTime" class="col-md-2" style="width:100vw;">Received Time</th>
<th data-field="Delete" class="col-md-1" style="width:100vw;"></th>
</tr>
</thead>
<tbody id="tblBodyFiles">
</tbody>
</table>
</div>
CSS
.table-wrapper {
max-height: 200px;
overflow: auto;
display: inline-block;
}
我现在想做的就是固定问题,非常感谢。非常感谢帮助
答案 0 :(得分:0)
您可以绝对定位thead行的位置,并为表格提供一些填充,以便第一行不会在其下移动。这样,标题行就固定在表格的顶部。
table {
position: relative;
padding-top: 20px;
}
thead {
position: absolute;
top: 0;
left: 0;
}
答案 1 :(得分:0)
向每个position:sticky
元素添加th
。您必须对th
元素执行此操作,而不要对thead
或tr
元素执行此操作。这应该可以帮助您开始:
.table-wrapper {
height: 120px;
overflow: auto;
border: 1px solid blue;
}
th {
position: sticky;
padding: 0px;
top: 0px;
background: white;
}
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
</tr>
</tbody>
</table>
</div>