4
私はテーブルを作成しようとしています。 すべてのセルの大きさを決定するためにパーセンテージと固定幅を使用しています。私のパーセンテージ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）と[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スクロールしながらも頭の中に固定されている）、[this]（https://www.tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/） – caramba