我有一個表，它有很多列，基本上，這個 CSS 設定附帶table的類是：table-responsive
.table-responsive {
display: block;
width: 100%;
overflow-x: scrollbar;
}
它正確顯示了水平滾動條：
但問題是，這個滾動條出現在表格的末尾，我希望它顯示在顯示資料的表格的頂部（第一行的頂部）。
那么如何將水平滾動條移動到表格頂部（之后<thead>）？
<table class="table table-bordered table-sm">
<thead class="thead-dark">
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
..
<th>Col 10</th>
</tr>
</thead>
<tbody>
<tr>
...
</tr>
</tbody>
</table>
uj5u.com熱心網友回復：
將滾動條旋轉到頂部的 180 度變換，然后再旋轉 180 度以放回內容。我在你的表中添加了一個div隨機內容，只是為了目的。
.divcontainer {
overflow-x: scroll;
overflow-y: auto;
transform: rotateX(180deg);
}
.divcontainer table {
transform: rotateX(180deg);
}
.table-responsive {
width: 100%;
display: block overflow-x: scroll;
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="divcontainer">
<table class="table table-bordered table-sm table-responsive">
<thead class="thead-dark">
<tr>
<th>Col 1zzzzzzzzzzzzzzzzzzzzz</th>
<th>Col 2zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</th>
<th>Col 3zzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</th>
<th>Col 10</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>uj5u.com熱心網友回復：
沒有直接的 CSS 支持，并且瀏覽器在技術上可以自由地以任何他們想要的方式實作此功能，因此大多數滾動條在 x 和 y 溢位的底部和右側。也就是說，我發現了一個可以滿足您的目的的好技巧：
.table-responsive {
transform: rotateX(180deg);
}
.table-responsive * {
transform: rotateX(180deg);
}
我們需要在這里做的是“翻轉”外框，使其上下顛倒，然后將里面的內容翻轉回來，使其正面朝上，使其清晰易讀。
您可能需要進行一些試驗才能做到這一點，但它應該需要一些作業。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/507456.html
上一篇：迭代代碼以在第n項添加新行