我可以使用 HTML 和 CSS 在表格的頂部和底部設定水平捲軸嗎？

頂部和底部的水平滾動條

問題：

是否可以有僅使用HTML 和CSS 在大表格的頂部和底部設定水平捲軸？

答案：

是的，您可以在頂部模擬第二個水平滾動條

實現：

實現：

在具有水平捲動的表格上方建立一個「虛擬」div。該 div 的高度應足以容納捲軸。 將事件處理程序附加到虛擬 div 和實際表格的捲動事件。這將在移動任一滾動條時同步兩個滾動條的滾動。

代碼示例：

<code class="html"><div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content here -->
  </div>
</div></code>

HTML：

<code class="css">.wrapper1, .wrapper2 {
  width: 300px;
  overflow-x: scroll;
  overflow-y:hidden;
}

.wrapper1 {height: 20px; }
.wrapper2 {height: 200px; }

.div1 {
  width:1000px;
  height: 20px;
}

.div2 {
  width:1000px;
  height: 200px;
  background-color: #88FF88;
  overflow: auto;
}</code>

CSS:

<code class="javascript">$(function(){
  $(".wrapper1").scroll(function(){
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function(){
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});</code>

JavaScript:

實例：請參閱[現場範例]（此處的小提琴連結）來說明效果。

以上是我可以使用 HTML 和 CSS 在表格的頂部和底部設定水平捲軸嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！