4
我試圖製作一個表格，其中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它的作品，因爲我想，但該線程不會留在上面。
試試這個https://jsfiddle.net/96guwhfe/6/ – krish
但是你試過[這]（https://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody）and [this]（https://stackoverflow.com/questions/38198373/make-html-table-thead-fixed- while-scrol-in-dynamic-tbody-in-php）和[this]（https://stackoverflow.com/questions/8321849/how-to-scroll-tables-tbody-independent-of-thead）和[this ]（https://stackoverflow.com/questions/130564/how-can-i-let-a-tables-b ody-scroll-but-keep-its-head-fixed-in-place）和[this]（https://www.tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/） – caramba