我正在尝试创建一个表格,其中thead不会滚动但是tbody会滚动。 我使用百分比和固定宽度来决定每个单元格的大小,我希望我的百分比td都具有相同的大小并与thead标题对齐。
我还有JSFiddle来显示问题。
.main-wrapper {
overflow-y: scroll;
height: 300px;
border: 1px solid blue;
}
.content-wrapper {
height: 500px;
}
.table {
width: 100%;
table-layout: fixed;
}
.table.content {
margin-bottom: 15px;
}
.header {
position: fixed;
}
.cell {
border: 1px solid red;
width: 100%;
height: 15px;
}
.medium {
width: 100px;
}
.small {
width: 50px;
}
<div class="main-wrapper">
<div class="content-wrapper">
<table class="table header">
<thead>
<tr>
<th class="cell medium">A</th>
<th class="cell small">B</th>
<th class="cell">C</th>
<th class="cell">D</th>
<th class="cell">E</th>
<th class="cell">F</th>
<th class="cell">G</th>
<th class="cell">H</th>
<th class="cell">I</th>
<th class="cell small">J</th>
</tr>
</thead>
</table>
<table class="table content">
<tbody>
<tr>
<td class="cell medium">A</td>
<td class="cell small">B</td>
<td class="cell">C</td>
<td class="cell">D</td>
<td class="cell">E</td>
<td class="cell">F</td>
<td class="cell">G</td>
<td class="cell">H</td>
<td class="cell">I</td>
<td class="cell small">J</td>
</tr>
<tr>
<td class="cell medium">A</td>
<td class="cell small">B</td>
<td class="cell">C</td>
<td class="cell">D</td>
<td class="cell">E</td>
<td class="cell">F</td>
<td class="cell">G</td>
<td class="cell">H</td>
<td class="cell">I</td>
<td class="cell small">J</td>
</tr>
<tr>
<td class="cell medium">A</td>
<td class="cell small">B</td>
<td class="cell">C</td>
<td class="cell">D</td>
<td class="cell">E</td>
<td class="cell">F</td>
<td class="cell">G</td>
<td class="cell">H</td>
<td class="cell">I</td>
<td class="cell small">J</td>
</tr>
<tr>
<td class="cell medium">A</td>
<td class="cell small">B</td>
<td class="cell">C</td>
<td class="cell">D</td>
<td class="cell">E</td>
<td class="cell">F</td>
<td class="cell">G</td>
<td class="cell">H</td>
<td class="cell">I</td>
<td class="cell small">J</td>
</tr>
</tbody>
</table>
</div>
</div>
如果我删除position: fixed
它可以按我的意愿工作,但线程不会停留在顶部。
答案 0 :(得分:0)
我认为只有CSS不可能。
我太久以前尝试过,并寻找一个没有运气的解决方案。
接受它的唯一方法(我认为)是通过javascript而不是表格而是Divs。
幸运的是,有一些插件可以帮助我们,例如fixedheadertable
答案 1 :(得分:0)
如果您在表格中没有使用<thead>
标记,则可以使用position:sticky
属性来保持单元格宽度,同时不将标题单元格移出html流程(固定位置)
这样:
.main-wrapper {
overflow-y: scroll;
height: 300px;
border: 1px solid blue;
}
.content-wrapper {
height: 500px;
}
.table {
width: 100%;
table-layout: fixed;
}
.table.content {
margin-bottom: 15px;
}
th{
position: sticky;
top:0px;
}
.cell {
border: 1px solid red;
width: 100%;
height: 15px;
}
.medium {
width: 100px;
}
.small {
width: 50px;
}
<div class="main-wrapper">
<div class="content-wrapper">
<table class="table header">
<tbody>
<tr>
<th class="cell medium">A</th>
<th class="cell small">B</th>
<th class="cell">C</th>
<th class="cell">D</th>
<th class="cell">E</th>
<th class="cell">F</th>
<th class="cell">G</th>
<th class="cell">H</th>
<th class="cell">I</th>
<th class="cell small">J</th>
</tr>
<tr>
<td class="cell medium">A</td>
<td class="cell small">B</td>
<td class="cell">C</td>
<td class="cell">D</td>
<td class="cell">E</td>
<td class="cell">F</td>
<td class="cell">G</td>
<td class="cell">H</td>
<td class="cell">I</td>
<td class="cell small">J</td>
</tr>
<tr>
<td class="cell medium">A</td>
<td class="cell small">B</td>
<td class="cell">C</td>
<td class="cell">D</td>
<td class="cell">E</td>
<td class="cell">F</td>
<td class="cell">G</td>
<td class="cell">H</td>
<td class="cell">I</td>
<td class="cell small">J</td>
</tr>
<tr>
<td class="cell medium">A</td>
<td class="cell small">B</td>
<td class="cell">C</td>
<td class="cell">D</td>
<td class="cell">E</td>
<td class="cell">F</td>
<td class="cell">G</td>
<td class="cell">H</td>
<td class="cell">I</td>
<td class="cell small">J</td>
</tr>
<tr>
<td class="cell medium">A</td>
<td class="cell small">B</td>
<td class="cell">C</td>
<td class="cell">D</td>
<td class="cell">E</td>
<td class="cell">F</td>
<td class="cell">G</td>
<td class="cell">H</td>
<td class="cell">I</td>
<td class="cell small">J</td>
</tr>
</tbody>
</table>
</div>
</div>