首页新闻找找看学习计划

救急!!!!!!

0
悬赏园豆:100 [已解决问题] 解决于 2014-06-16 16:58

近期在做一个项目,遇到难点了希望能得到帮助

  需求

    1、表格有横纵向的滚动条,纵向滚动时表头不滚动,横向滚动时第一和最后一列不滚动

    2、可以动态添加多行数据

    3、表格嵌套在div中是响应式布局,添加数据不影响布局

    4、横向的滚动条最好是默认在最中间位置对应9~17这几列

    5、最好考虑下浏览器兼容性(ie8为住)

    6、不用插件

海阔天空@的主页 海阔天空@ | 初学一级 | 园豆:114
提问于:2014-06-09 16:26
< >
分享
最佳答案
0

世上无难事,只怕有心人,你把问题拆分了解决,我觉得没有什么难点,只是麻烦了一点,你一步一步实现,只要css+div控制的好,实现起来是不难的

收获园豆:100
刘宏玺 | 专家六级 |园豆:14004 | 2014-06-09 22:40

就是这样想的,目前纵向的滚动条,横向的滚动条都弄好了,该怎么把两个内容叠合起来

海阔天空@ | 园豆:114 (初学一级) | 2014-06-10 08:44

@海阔天空@: 你的纵向滚动条不用变,横向滚动条只需要控制里面的那一块不就得了,可以配合js来实现啊

刘宏玺 | 园豆:14004 (专家六级) | 2014-06-10 09:06

@刘宏玺: http://www.ligerui.com/demos/grid/frozen/frozengrid.htm

你看看这个例子,应该是你希望的效果

刘宏玺 | 园豆:14004 (专家六级) | 2014-06-10 10:08

@海阔天空@:在有控制条的div里放置下面这段代码就好了,自己想想就明白了。

 onscroll="document.getElementById('divRightHeader').scrollLeft=this.scrollLeft;document.getElementById('divLeftBody').scrollTop=this.scrollTop;"

kylin.chen | 园豆:983 (小虾三级) | 2014-06-10 10:13

@刘宏玺: 哎,看一下需求亲,是上面表头中的1~24和下面的记录一起滚动,你给的例子链接我早就看过呢,还用ligerui自己做过(存在缺陷,针对性太差,功能太强大反而不美),还是很谢谢你

海阔天空@ | 园豆:114 (初学一级) | 2014-06-10 12:22
其他回答(3)
0

用的什么表格控件?好像随便一个grid控件都能固定表头吧

吴瑞祥 | 园豆:28729 (高人七级) | 2014-06-09 17:17

没用控件,就div+css样式,因为急用所以就直接写的(重点是可以动态添加行及滚动条的处理)

支持(0) 反对(0) 海阔天空@ | 园豆:114 (初学一级) | 2014-06-09 17:52
0

原理都一样吧,MagicGrid是一个不错的控件,也可以模仿它自己写啊,大都是通过div来实现的,还有就是用flash写一个,可能扩展兼容性更好吧,效率可能比较低

kylin.chen | 园豆:983 (小虾三级) | 2014-06-09 17:57

呵呵,控件的话我都找过,比如ligerui中的表格中的固定列以及extgrid中表格都实现了我所需的功能。但是都不是我所需要的,控件有几个缺点,比如虽然功能很全但是在应用软件上很多都用不上需要我去禁用他们的属性,兼用性不是特别好,针对性比较差。还有就是有些东西用控件反而会很麻烦,我需要的是能动态添加一行,控件就没有javascript方便。举个例子:例如我要动态的去改变某个单元格(5行4列这一格)的背景色控件该怎么实现呢?

支持(0) 反对(0) 海阔天空@ | 园豆:114 (初学一级) | 2014-06-09 18:26

@海阔天空@: 实际上也是可以实现的,追加数据,应该有默认方法的,实在不行可以ajax方式重新绑定所有数据,再不济,你可以直接用js通过css样式找到这行进行追加数据。

修改某格的属性,这种个性化的方法,要么你自己写grid,要么通过属性找到这个位置用js修改。

支持(0) 反对(0) kylin.chen | 园豆:983 (小虾三级) | 2014-06-09 19:33

控件段时间用的不熟,很多东西都不理解,有时间再去学学,先解了燃眉之急在说

支持(0) 反对(0) 海阔天空@ | 园豆:114 (初学一级) | 2014-06-10 08:47
0
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
            <meta charset="utf-8">
               <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="pragma" content="no-cache">
            <meta http-equiv="cache-control" content="no-cache">
            <meta http-equiv="expires" content="0">    
            <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
            <meta http-equiv="description" content="This is my page">
            
            <script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>
            <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
            
            <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
            <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
               <script type="text/javascript" src="bootstrap/js/vmdSubscribe.js"></script>
            
            
            
            <script type="text/javascript" src="table/jquery.js" ></script>
            <script src="table/blog-common.js" type="text/javascript"></script>
            
             <script type="javascript" src="table/jquery-1.8.2.min.js"></script>
            
            <link type="text/css" rel="stylesheet" href="table/blog-common.css">
            <link id="MainCss" type="text/css" rel="stylesheet" href="table/style.css">
            
            <link type="text/css" rel="stylesheet" href="css/table.css" />
            
            <script type="text/javascript">
                $(document).ready(function(){
                    $(".overflowx").scrollLeft(239);//设置横向滚动条居中
                });
            </script>
            
            <!--
                作者:beyondlmm@126.com
                时间:2014-06-11
                描述:整体思路:需要13个div嵌套,将table表分成6个块通过滚动条事件来控制那些块需要滚动
            -->
</head>
    <body>
        <!--
            作者:beyondlmm@126.com
            时间:2014-06-11
            描述:最外层div将宽度及高度写死
        -->
        <div class="divone"> 
                <!--
                    作者:beyondlmm@126.com
                    时间:2014-06-11
                    描述:右边是放纵向滚动条的,重点就是上左这一块
                -->
                <div class="divoneleft">
                    <div class="divoneleftinleft">
                        <div class="divoneleftinleftintop">会议室</div>
                        <div id="ToScroll" class="divoneleftinleftinbottom">
                            <table class="tableborder1 divoneleftinleftinbottomintable">
                                <tr class="divoneleftinrightinbottomintableintr" >
                                    <td class="divoneleftinleftinbottomintableintrintd">
                                          <button type="button" class="btn btn-default divoneleftinleftinbottomintableintrintdinbutton" >
                                              <span class="glyphicon glyphicon-minus-sign"></span> 
                                          </button>
                                      </td>
                                      <td class="divoneleftinleftinbottomintableintrintdone">深圳分局:研发部办公室研发部办公室研发部</td>
                                </tr>
                                <tr class="divoneleftinrightinbottomintableintr">
                                    <td class="divoneleftinleftinbottomintableintrintd">
                                          <button type="button" class="btn btn-default divoneleftinleftinbottomintableintrintdinbutton">
                                              <span class="glyphicon glyphicon-minus-sign"></span> 
                                          </button>
                                      </td>
                                      <td class="divoneleftinleftinbottomintableintrintdone">深圳分局:研发部办公室</td>
                                </tr>
                                <tr class="divoneleftinrightinbottomintableintr">
                                    <td class="divoneleftinleftinbottomintableintrintd">
                                          <button type="button" class="btn btn-default divoneleftinleftinbottomintableintrintdinbutton">
                                              <span class="glyphicon glyphicon-minus-sign"></span> 
                                          </button>
                                      </td>
                                      <td class="divoneleftinleftinbottomintableintrintdone">深圳分局:研发部办公室研发部办公室研发部</td>
                                </tr>
                                <tr class="divoneleftinrightinbottomintableintr">
                                    <td class="divoneleftinleftinbottomintableintrintd">
                                          <button type="button" class="btn btn-default divoneleftinleftinbottomintableintrintdinbutton">
                                              <span class="glyphicon glyphicon-minus-sign" ></span> 
                                          </button>
                                      </td>
                                      <td class="divoneleftinleftinbottomintableintrintdone">深圳分局:研发部办公室</td>
                                </tr>
                                <tr class="divoneleftinrightinbottomintableintr">
                                    <td class="divoneleftinleftinbottomintableintrintd">
                                          <button type="button" class="btn btn-default divoneleftinleftinbottomintableintrintdinbutton">
                                              <span class="glyphicon glyphicon-minus-sign" ></span> 
                                          </button>
                                      </td>
                                      <td class="divoneleftinleftinbottomintableintrintdone">深圳分局:研发部办公室研发部办公室研发部</td>
                                </tr>
                                <tr class="divoneleftinrightinbottomintableintr">
                                    <td class="divoneleftinleftinbottomintableintrintd">
                                          <button type="button" class="btn btn-default divoneleftinleftinbottomintableintrintdinbutton">
                                              <span class="glyphicon glyphicon-minus-sign"></span> 
                                          </button>
                                      </td>
                                      <td class="divoneleftinleftinbottomintableintrintdone">深圳分局:研发部办公室</td>
                                </tr>
                                <tr class="divoneleftinrightinbottomintableintr">
                                    <td class="divoneleftinleftinbottomintableintrintd">
                                          <button type="button" class="btn btn-default divoneleftinleftinbottomintableintrintdinbutton">
                                              <span class="glyphicon glyphicon-minus-sign" ></span> 
                                          </button>
                                      </td>
                                      <td class="divoneleftinleftinbottomintableintrintdone">深圳分局:研发部办公室研发部办公室研发部</td>
                                </tr>
                                <tr class="divoneleftinrightinbottomintableintr">
                                    <td class="divoneleftinleftinbottomintableintrintd">
                                          <button type="button" class="btn btn-default divoneleftinleftinbottomintableintrintdinbutton">
                                              <span class="glyphicon glyphicon-minus-sign" ></span> 
                                          </button>
                                      </td>
                                      <td class="divoneleftinleftinbottomintableintrintdone">深圳分局:研发部办公室</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="overflowx divoneleftincenter" >
                        <div class="divoneleftincenterintop">
                            <table class="tableborder divoneleftincenterintopintable" align="center">
                                  <tr>
                                      <td class="divoneleftincenterintopintableintd">0</td>
                                      <td class="divoneleftincenterintopintableintd">1</td>
                                      <td class="divoneleftincenterintopintableintd">2</td>
                                      <td class="divoneleftincenterintopintableintd">3</td>
                                      <td class="divoneleftincenterintopintableintd">4</td>
                                      <td class="divoneleftincenterintopintableintd">5</td>
                                      <td class="divoneleftincenterintopintableintd">6</td>
                                      <td class="divoneleftincenterintopintableintd">7</td>
                                      <td class="divoneleftincenterintopintableintd">8</td>
                                      <td class="divoneleftincenterintopintableintd">9</td>
                                      <td class="divoneleftincenterintopintableintd">10</td>
                                      <td class="divoneleftincenterintopintableintd">11</td>
                                      <td class="divoneleftincenterintopintableintd">12</td>
                                      <td class="divoneleftincenterintopintableintd">13</td>
                                      <td class="divoneleftincenterintopintableintd">14</td>
                                      <td class="divoneleftincenterintopintableintd">15</td>
                                      <td class="divoneleftincenterintopintableintd">16</td>
                                      <td class="divoneleftincenterintopintableintd">17</td>
                                      <td class="divoneleftincenterintopintableintd">18</td>
                                      <td class="divoneleftincenterintopintableintd">19</td>
                                      <td class="divoneleftincenterintopintableintd">20</td>
                                      <td class="divoneleftincenterintopintableintd">21</td>
                                      <td class="divoneleftincenterintopintableintd">22</td>
                                      <td class="divoneleftincenterintopintableintd">23</td>
                                  </tr>
                                  
                              </table>
                        </div>
                        <div id="ToScroll1" class="divoneleftincenterinbottom">
                            <table class="tableborder1 divoneleftincenterinbottomintable">
                                <tr >
                                    <td class="divoneleftincenterinbottomintableintd">1</td>
                                      <td class="divoneleftincenterinbottomintableintd">2</td>
                                      <td class="divoneleftincenterinbottomintableintd">3</td>
                                      <td class="divoneleftincenterinbottomintableintd">4</td>
                                      <td class="divoneleftincenterinbottomintableintd">5</td>
                                      <td class="divoneleftincenterinbottomintableintd">6</td>
                                      <td class="divoneleftincenterinbottomintableintd">7</td>
                                      <td class="divoneleftincenterinbottomintableintd">8</td>
                                      <td class="divoneleftincenterinbottomintableintd">9</td>
                                      <td class="divoneleftincenterinbottomintableintd">10</td>
                                      <td class="divoneleftincenterinbottomintableintd">11</td>
                                      <td class="divoneleftincenterinbottomintableintd">12</td>
                                      <td class="divoneleftincenterinbottomintableintd">1</td>
                                      <td class="divoneleftincenterinbottomintableintd">2</td>
                                      <td class="divoneleftincenterinbottomintableintd">3</td>
                                      <td class="divoneleftincenterinbottomintableintd">4</td>
                                      <td class="divoneleftincenterinbottomintableintd">5</td>
                                      <td class="divoneleftincenterinbottomintableintd">6</td>
                                      <td class="divoneleftincenterinbottomintableintd">7</td>
                                      <td class="divoneleftincenterinbottomintableintd">8</td>
                                      <td class="divoneleftincenterinbottomintableintd">9</td>
                                      <td class="divoneleftincenterinbottomintableintd">10</td>
                                      <td class="divoneleftincenterinbottomintableintd">11</td>
                                      <td class="divoneleftincenterinbottomintableintd">12</td>
                                </tr>
                                <tr >
                                    <td class="divoneleftincenterinbottomintableintd">1</td>
                                      <td class="divoneleftincenterinbottomintableintd">2</td>
                                      <td class="divoneleftincenterinbottomintableintd">3</td>
                                      <td class="divoneleftincenterinbottomintableintd">4</td>
                                      <td class="divoneleftincenterinbottomintableintd">5</td>
                                      <td class="divoneleftincenterinbottomintableintd">6</td>
                                      <td class="divoneleftincenterinbottomintableintd">7</td>
                                      <td class="divoneleftincenterinbottomintableintd">8</td>
                                      <td class="divoneleftincenterinbottomintableintd">9</td>
                                      <td class="divoneleftincenterinbottomintableintd">10</td>
                                      <td class="divoneleftincenterinbottomintableintd">11</td>
                                      <td class="divoneleftincenterinbottomintableintd">12</td>
                                      <td class="divoneleftincenterinbottomintableintd">1</td>
                                      <td class="divoneleftincenterinbottomintableintd">2</td>
                                      <td class="divoneleftincenterinbottomintableintd">3</td>
                                      <td class="divoneleftincenterinbottomintableintd">4</td>
                                      <td class="divoneleftincenterinbottomintableintd">5</td>
                                      <td class="divoneleftincenterinbottomintableintd">6</td>
                                      <td class="divoneleftincenterinbottomintableintd">7</td>
                                      <td class="divoneleftincenterinbottomintableintd">8</td>
                                      <td class="divoneleftincenterinbottomintableintd">9</td>
                                      <td class="divoneleftincenterinbottomintableintd">10</td>
                                      <td class="divoneleftincenterinbottomintableintd">11</td>
                                      <td class="divoneleftincenterinbottomintableintd">12</td>
                                </tr>
                                <tr >
                                    <td class="divoneleftincenterinbottomintableintd">1</td>
                                      <td class="divoneleftincenterinbottomintableintd">2</td>
                                      <td class="divoneleftincenterinbottomintableintd">3</td>
                                      <td class="divoneleftincenterinbottomintableintd">4</td>
                                      <td class="divoneleftincenterinbottomintableintd">5</td>
                                      <td class="divoneleftincenterinbottomintableintd">6</td>
                                      <td class="divoneleftincenterinbottomintableintd">7</td>
                                      <td class="divoneleftincenterinbottomintableintd">8</td>
                                      <td class="divoneleftincenterinbottomintableintd">9</td>
                                      <td class="divoneleftincenterinbottomintableintd">10</td>
                                      <td class="divoneleftincenterinbottomintableintd">11</td>
                                      <td class="divoneleftincenterinbottomintableintd">12</td>
                                      <td class="divoneleftincenterinbottomintableintd">1</td>
                                      <td class="divoneleftincenterinbottomintableintd">2</td>
                                      <td class="divoneleftincenterinbottomintableintd">3</td>
                                      <td class="divoneleftincenterinbottomintableintd">4</td>
                                      <td class="divoneleftincenterinbottomintableintd">5</td>
                                      <td class="divoneleftincenterinbottomintableintd">6</td>
                                      <td class="divoneleftincenterinbottomintableintd">7</td>
                                      <td class="divoneleftincenterinbottomintableintd">8</td>
                                      <td class="divoneleftincenterinbottomintableintd">9</td>
                                      <td class="divoneleftincenterinbottomintableintd">10</td>
                                      <td class="divoneleftincenterinbottomintableintd">11</td>
                                      <td class="divoneleftincenterinbottomintableintd">12</td>
                                </tr>
                                <tr >
                                    <td class="divoneleftincenterinbottomintableintd">1</td>
                                      <td class="divoneleftincenterinbottomintableintd">2</td>
                                      <td class="divoneleftincenterinbottomintableintd">3</td>
                                      <td class="divoneleftincenterinbottomintableintd">4</td>
                                      <td class="divoneleftincenterinbottomintableintd">5</td>
                                      <td class="divoneleftincenterinbottomintableintd">6</td>
                                      <td class="divoneleftincenterinbottomintableintd">7</td>
                                      <td class="divoneleftincenterinbottomintableintd">8</td>
                                      <td class="divoneleftincenterinbottomintableintd">9</td>
                                      <td class="divoneleftincenterinbottomintableintd">10</td>
                                      <td class="divoneleftincenterinbottomintableintd">11</td>
                                      <td class="divoneleftincenterinbottomintableintd">12</td>
                                      <td class="divoneleftincenterinbottomintableintd">1</td>
                                      <td class="divoneleftincenterinbottomintableintd">2</td>
                                      <td class="divoneleftincenterinbottomintableintd">3</td>
                                      <td class="divoneleftincenterinbottomintableintd">4</td>
                                      <td class="divoneleftincenterinbottomintableintd">5</td>
                                      <td class="divoneleftincenterinbottomintableintd">6</td>
                                      <td class="divoneleftincenterinbottomintableintd">7</td>
                                      <td class="divoneleftincenterinbottomintableintd">8</td>
                                      <td class="divoneleftincenterinbottomintableintd">9</td>
                                      <td class="divoneleftincenterinbottomintableintd">10</td>
                                      <td class="divoneleftincenterinbottomintableintd">11</td>
                                      <td class="divoneleftincenterinbottomintableintd">12</td>
                                </tr>
                                <tr >
                                    <td class="divoneleftincenterinbottomintableintd">1</td>
                                      <td class="divoneleftincenterinbottomintableintd">2</td>
                                      <td class="divoneleftincenterinbottomintableintd">3</td>
                                      <td class="divoneleftincenterinbottomintableintd">4</td>
                                      <td class="divoneleftincenterinbottomintableintd">5</td>
                                      <td class="divoneleftincenterinbottomintableintd">6</td>
                                      <td class="divoneleftincenterinbottomintableintd">7</td>
                                      <td class="divoneleftincenterinbottomintableintd">8</td>
                                      <td class="divoneleftincenterinbottomintableintd">9</td>
                                      <td class="divoneleftincenterinbottomintableintd">10</td>
                                      <td class="divoneleftincenterinbottomintableintd">11</td>
                                      <td class="divoneleftincenterinbottomintableintd">12</td>
                                      <td class="divoneleftincenterinbottomintableintd">1</td>
                                      <td class="divoneleftincenterinbottomintableintd">2</td>
                                      <td class="divoneleftincenterinbottomintableintd">3</td>
                                      <td class="divoneleftincenterinbottomintableintd">4</td>
                                      <td class="divoneleftincenterinbottomintableintd">5</td>
                                      <td class="divoneleftincenterinbottomintableintd">6</td>
                                      <td class="divoneleftincenterinbottomintableintd">7</td>
                                      <td class="divoneleftincenterinbottomintableintd">8</td>
                                      <td class="divoneleftincenterinbottomintableintd">9</td>
                                      <td class="divoneleftincenterinbottomintableintd">10</td>
                                      <td class="divoneleftincenterinbottomintableintd">11</td>
                                      <td class="divoneleftincenterinbottomintableintd">12</td>
                                </tr>
                                <tr >
                                    <td class="divoneleftincenterinbottomintableintd">1</td>
                                      <td class="divoneleftincenterinbottomintableintd">2</td>
                                      <td class="divoneleftincenterinbottomintableintd">3</td>
                                      <td class="divoneleftincenterinbottomintableintd">4</td>
                                      <td class="divoneleftincenterinbottomintableintd">5</td>
                                      <td class="divoneleftincenterinbottomintableintd">6</td>
                                      <td class="divoneleftincenterinbottomintableintd">7</td>
                                      <td class="divoneleftincenterinbottomintableintd">8</td>
                                      <td class="divoneleftincenterinbottomintableintd">9</td>
                                      <td class="divoneleftincenterinbottomintableintd">10</td>
                                      <td class="divoneleftincenterinbottomintableintd">11</td>
                                      <td class="divoneleftincenterinbottomintableintd">12</td>
                                      <td class="divoneleftincenterinbottomintableintd">1</td>
                                      <td class="divoneleftincenterinbottomintableintd">2</td>
                                      <td class="divoneleftincenterinbottomintableintd">3</td>
                                      <td class="divoneleftincenterinbottomintableintd">4</td>
                                      <td class="divoneleftincenterinbottomintableintd">5</td>
                                      <td class="divoneleftincenterinbottomintableintd">6</td>
                                      <td class="divoneleftincenterinbottomintableintd">7</td>
                                      <td class="divoneleftincenterinbottomintableintd">8</td>
                                      <td class="divoneleftincenterinbottomintableintd">9</td>
                                      <td class="divoneleftincenterinbottomintableintd">10</td>
                                      <td class="divoneleftincenterinbottomintableintd">11</td>
                                      <td class="divoneleftincenterinbottomintableintd">12</td>
                                </tr>
                                <tr >
                                    <td class="divoneleftincenterinbottomintableintd">1</td>
                                      <td class="divoneleftincenterinbottomintableintd">2</td>
                                      <td class="divoneleftincenterinbottomintableintd">3</td>
                                      <td class="divoneleftincenterinbottomintableintd">4</td>
                                      <td class="divoneleftincenterinbottomintableintd">5</td>
                                      <td class="divoneleftincenterinbottomintableintd">6</td>
                                      <td class="divoneleftincenterinbottomintableintd">7</td>
                                      <td class="divoneleftincenterinbottomintableintd">8</td>
                                      <td class="divoneleftincenterinbottomintableintd">9</td>
                                      <td class="divoneleftincenterinbottomintableintd">10</td>
                                      <td class="divoneleftincenterinbottomintableintd">11</td>
                                      <td class="divoneleftincenterinbottomintableintd">12</td>
                                      <td class="divoneleftincenterinbottomintableintd">1</td>
                                      <td class="divoneleftincenterinbottomintableintd">2</td>
                                      <td class="divoneleftincenterinbottomintableintd">3</td>
                                      <td class="divoneleftincenterinbottomintableintd">4</td>
                                      <td class="divoneleftincenterinbottomintableintd">5</td>
                                      <td class="divoneleftincenterinbottomintableintd">6</td>
                                      <td class="divoneleftincenterinbottomintableintd">7</td>
                                      <td class="divoneleftincenterinbottomintableintd">8</td>
                                      <td class="divoneleftincenterinbottomintableintd">9</td>
                                      <td class="divoneleftincenterinbottomintableintd">10</td>
                                      <td class="divoneleftincenterinbottomintableintd">11</td>
                                      <td class="divoneleftincenterinbottomintableintd">12</td>
                                </tr>
                                <tr >
                                    <td class="divoneleftincenterinbottomintableintd">1</td>
                                      <td class="divoneleftincenterinbottomintableintd">2</td>
                                      <td class="divoneleftincenterinbottomintableintd">3</td>
                                      <td class="divoneleftincenterinbottomintableintd">4</td>
                                      <td class="divoneleftincenterinbottomintableintd">5</td>
                                      <td class="divoneleftincenterinbottomintableintd">6</td>
                                      <td class="divoneleftincenterinbottomintableintd">7</td>
                                      <td class="divoneleftincenterinbottomintableintd">8</td>
                                      <td class="divoneleftincenterinbottomintableintd">9</td>
                                      <td class="divoneleftincenterinbottomintableintd">10</td>
                                      <td class="divoneleftincenterinbottomintableintd">11</td>
                                      <td class="divoneleftincenterinbottomintableintd">12</td>
                                      <td class="divoneleftincenterinbottomintableintd">1</td>
                                      <td class="divoneleftincenterinbottomintableintd">2</td>
                                      <td class="divoneleftincenterinbottomintableintd">3</td>
                                      <td class="divoneleftincenterinbottomintableintd">4</td>
                                      <td class="divoneleftincenterinbottomintableintd">5</td>
                                      <td class="divoneleftincenterinbottomintableintd">6</td>
                                      <td class="divoneleftincenterinbottomintableintd">7</td>
                                      <td class="divoneleftincenterinbottomintableintd">8</td>
                                      <td class="divoneleftincenterinbottomintableintd">9</td>
                                      <td class="divoneleftincenterinbottomintableintd">10</td>
                                      <td class="divoneleftincenterinbottomintableintd">11</td>
                                      <td class="divoneleftincenterinbottomintableintd">12</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    
                    <div class="divoneleftinright">
                        <div class="divoneleftinrightintop">参与人员</div>
                        <div id="ToScroll2" class="divoneleftinrightinbottom">
                            <table class="tableborder1 divoneleftinrightinbottomintable">
                                <tr class="divoneleftinrightinbottomintableintr">
                                    <td>张三、李四、王五、赵六、朱八张三、李四、王五、赵六、朱八张三、李四、王五、赵六、</td>
                                  </tr>
                                  <tr class="divoneleftinrightinbottomintableintr">
                                    <td ></td>
                                  </tr>
                                  <tr class="divoneleftinrightinbottomintableintr">
                                    <td >张三、李四、王五、赵六、朱八张三、李四、王五、赵六、朱八张三、李四、王五、赵六、</td>
                                  </tr>
                                  <tr class="divoneleftinrightinbottomintableintr">
                                    <td ></td>
                                  </tr>
                                  <tr class="divoneleftinrightinbottomintableintr">
                                    <td >张三、李四、王五、赵六、朱八张三、李四、王五、赵六、朱八张三、李四、王五、赵六、</td>
                                  </tr>
                                  <tr class="divoneleftinrightinbottomintableintr">
                                    <td ></td>
                                  </tr>
                                  <tr class="divoneleftinrightinbottomintableintr">
                                    <td >张三、李四、王五、赵六、朱八张三、李四、王五、赵六、朱八张三、李四、王五、赵六、</td>
                                  </tr>
                                  <tr class="divoneleftinrightinbottomintableintr">
                                    <td ></td>
                                  </tr>
                            </table>
                            
                        </div>
                    </div>
                </div>
                
                <div class="divoneright" onscroll="document.getElementById('ToScroll').scrollTop = this.scrollTop;document.getElementById('ToScroll1').scrollTop = this.scrollTop;document.getElementById('ToScroll2').scrollTop = this.scrollTop;">
                    <div class="divonerightindiv">&nbsp;</div>
                </div>
                
            </div>
         
    </body>
</html>
View Code
海阔天空@ | 园豆:114 (初学一级) | 2014-06-16 16:57
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册