水平滚动条在表的顶部和底部 [英] horizontal scrollbar on top and bottom of table

问题描述

我的网页上有一个非常大的表格。所以我决定把一个水平滚动条放在桌子的底部。但我想这个滚动条也在桌子上。

我在模板中是这样：

 < div style =overflow：auto; width：100％; height：130％> 
< table id =datastyle =width：100％> 
  

这只能在HTML和CSS中执行吗？

div 有水平滚动，刚好足够高的滚动条。然后为虚拟元素和真实元素附加scroll事件的处理程序，以便在移动任一滚动条时使另一个元素同步。虚拟元素将看起来像真实元素上方的第二个水平滚动条。

有关实时示例，请参阅 this fiddle

以下是代码：

HTML：

 < div class =wrapper1> 
< div class =div1>< / div> 
< / div> 
< div class =wrapper2> 
< div class =div2> 
<！ -  Content Here  - > 
< / div> 
< / div> 
  

CSS：

 code> .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; 
} 
  

JS：

  $（function（）{
 $（。wrapper1）。scroll（function（）{
 $（wrapper2）。scrollLeft .wrapper1）。scrollLeft（）; 
}）; 
 $（。wrapper2）。 $（。wrapper2）。scrollLeft（））; 
}）; 
}）; 
  

I've a very large table on my page. So I decided to put a horizontal scrollbar that is placed on the bottom of the table. But I would like this scrollbar to be also on top on the table.

What I have in the template is this:

<div style="overflow:auto; width:100%; height:130%">
<table id="data" style="width:100%">

Is this possible to do in HTML and CSS only?

解决方案

To simulate a second horizontal scrollbar on top of an element, put a "dummy" div above the element that has horizontal scrolling, just high enough for a scrollbar. Then attach handlers of the "scroll" event for the dummy element and the real element, to get the other element in synch when either scrollbar is moved. The dummy element will look like a second horizontal scrollbar above the real element.

For a live example, see this fiddle

Here's the code:

HTML:

<div class="wrapper1">
  <div class="div1"></div>
</div>
<div class="wrapper2">
  <div class="div2">
    <!-- Content Here -->
  </div>
</div>

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;
}

JS:

$(function(){
  $(".wrapper1").scroll(function(){
    $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
  });
  $(".wrapper2").scroll(function(){
    $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
  });
});

这篇关于水平滚动条在表的顶部和底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！