关于横向滚动的问题，大家帮帮忙。

我就是有这样一个疑问，一个页面只有这么宽，但是我的查询结果列表字段比较多，造成横向滚动条，但是数据比较大，表头看到了，下班的数据要看的话也要滚到下部，可是我又要看下面的，又要看表头这是个什么字段，还要看横向最右边的数据，怎吗搞啊？
有没有一种方式就是当鼠标移动到了这个列表表格的右边时就字段横向滚动条往右滚，移到左边就到左滚。
小人不是很懂。希望详细点就更好！
谢谢谢。谢谢谢。谢谢谢。
谢谢谢。谢谢谢。谢谢谢。谢谢谢。
谢谢谢。谢谢谢。谢谢谢。谢谢谢。谢谢谢。
谢谢谢。谢谢谢。谢谢谢。谢谢谢。谢谢谢。谢谢谢。
谢谢谢。谢谢谢。谢谢谢。谢谢谢。谢谢谢。谢谢谢。谢谢谢。

解决方案 »

  1.   

    你的问题可以总结为：如何实现可滚动的表格。以下是从百度得到的结果——以前我貌似就是参考的这个实现了可滚动表格。<html>
    <head>
    <title>多层表头测试</title>
    <style type="text/css" >
    div.DivContainer /* Div 控制滚动条 */ {
        overflow: scroll;
        border: solid 1px gray;
    }
    table {
        border-collapse: collapse;
    }
    td {
        position: relative;
        padding: 5px;
        border-top: solid 0px gray;
        border-bottom: solid 1px gray;
        border-left: solid 0px gray;
        border-right: solid 1px gray;
    }
    td.HLocked /* 非表头,上下滚动,左右不滚动--单元格样式 */ {
        z-index: 10;
        position: relative;
      left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
        background-color: #cccccc;
        text-align: center;
        border-top: solid 0px gray;
        border-bottom: solid 1px gray;
        border-left: solid 0px gray;
        border-right: solid 1px gray;
    }
    td.VLocked /* 锁定表头，上下不滚动,左右滚动--单元格样式 */ {
        z-index: 20;
        position: relative;
      top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop);
        color: black;
        background-color: #cccccc;
        text-align: center;
        border-top: solid 0px gray;
        border-bottom: solid 1px gray;
        border-left: solid 0px gray;
        border-right: solid 1px gray;
    }
    td.Locked /* 锁定表头，上下左右均不滚动 */ {
        z-index: 30;
        position: relative;
      top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop);
      left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
        color: black;
        background-color: #cccccc;
        text-align: center;
        border-top: solid 0px gray;
        border-bottom: solid 1px gray;
        border-left: solid 0px gray;
        border-right: solid 1px gray;
    }</style>
    </head>
    <body>
        <!--Div 控制 整个 table ,高度,宽度必须要-->
    <div class="DivContainer" style="width: 500px; height: 300px;">
      <table>
          <!--表头部分 开始-->
        <tr>
          <td class="Locked" colspan="4">Locked</td>
          <td class="VLocked" rowspan="3">VLocked</td>
          <td class="VLocked" rowspan="3">VLocked</td>
          <td class="VLocked" rowspan="3">VLocked</td>
          <td class="VLocked" rowspan="3">VLocked</td>
        </tr>
        <tr>
          <td class="Locked" colspan="2">Locked</td>
          <td class="Locked" colspan="2">Locked</td>
        </tr>
        <tr>
          <td class="Locked">Locked</td>
          <td class="Locked">Locked</td>
          <td class="Locked">Locked</td>
          <td class="Locked">Locked</td>
        </tr>
        <!--表头部分 结束 -->
        <!--内容部分 想垂直不滚动的使用 HLocked 样式-->
        <tr>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td>12</td>
          <td>13</td>
          <td>14</td>
          <td>15</td>
        </tr>
        <tr>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td>22</td>
          <td>23</td>
          <td>24</td>
          <td>25</td>
        </tr>
        <tr>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td>32</td>
          <td>33</td>
          <td>34</td>
          <td>35</td>
        </tr>
        <tr>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td>42</td>
          <td>43</td>
          <td>44</td>
          <td>45</td>
        </tr>
        <tr>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td>52</td>
          <td>53</td>
          <td>54</td>
          <td>55</td>
        </tr>
        <tr>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td>62</td>
          <td>63</td>
          <td>64</td>
          <td>65</td>
        </tr>
        <tr>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td>72</td>
          <td>73</td>
          <td>74</td>
          <td>75</td>
        </tr>
        <tr>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td>82</td>
          <td>83</td>
          <td>84</td>
          <td>85</td>
        </tr>
        <tr>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td class="HLocked">HLocked</td>
          <td>92</td>
          <td>93</td>
          <td>94</td>
          <td>95</td>
        </tr>
      </table>
    </div>
    </body>
    </html>
      

  2.   

    表头不要参与滚动好了，如：<div>表头</div>
    <div stype="overflow-y:scroll>内容</div>
    这样表头固定了，看下面的没问题根据鼠标移动自动左右滚动要用Js控制了，捕捉鼠标移动事件，主动滚动表格