解决方案 »

  1.   

    直接加iframe 关于水平和竖直的滚动条就很好解决。
      

  2.   

    第四点只需要指定开始区间就好了,后续的显示由容器的宽度来决定<style>
    .div_timegantt{overflow:auto;overflow-x:hidden;width:300px;}
    </style>
    <div id="div_timegantt" class="div_timegantt">
    <table cellpadding="0" cellspacing="0">
                                        <tr class="thead">
                                         
                                          <th colspan="6">&nbsp;&nbsp;00:00&nbsp;&nbsp;</th>
                                          <th colspan="6">&nbsp;&nbsp;01:00&nbsp;&nbsp;</th>
                                          <th colspan="6">&nbsp;&nbsp;02:00&nbsp;&nbsp;</th>
                                          <th colspan="6">&nbsp;&nbsp;03:00&nbsp;&nbsp;</th>
                                          <th colspan="6">&nbsp;&nbsp;04:00&nbsp;&nbsp;</th>
                                          <th colspan="6">&nbsp;&nbsp;05:00&nbsp;&nbsp;</th>
                                          <th colspan="6">&nbsp;&nbsp;06:00&nbsp;&nbsp;</th>
                                          <th colspan="6">&nbsp;&nbsp;07:00&nbsp;&nbsp;</th>
                                          <th colspan="6">&nbsp;&nbsp;08:00&nbsp;&nbsp;</th>                                       
                                          <th colspan="6">&nbsp;&nbsp;09:00&nbsp;&nbsp;</th>
                                          <th colspan="6">&nbsp;&nbsp;10:00&nbsp;&nbsp;</th>
                                        </tr>
                                         
                                        <!-- 1Row -->
                                        <tr class="tbody">
                                          <!-- 00:00 -->
                                          <td class="nonepast10">&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                           
                                          <!-- 01:00 -->
                                          <td class="nonepast10">&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                           
                                          <!-- 02:00 -->
                                          <td class="nonepast10">&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                           
                                          <!-- 03:00 -->
                                          <td class="nonepast10">&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                           
                                          <!-- 04:00 -->
                                          <td class="nonepast10">&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                           
                                          <!-- 05:00 -->
                                          <td class="nonepast10">&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                           
                                          <!-- 06:00 -->
                                          <td class="nonepast10">&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                           
                                          <!-- 07:00 -->
                                          <td class="nonepast10">&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                           
                                          <!-- 08:00 -->
                                          <td class="nonepast10">&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                           
                                          <!-- 09:00 -->
                                          <td class="nonepast10">&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                           
                                          <!-- 10:00 -->
                                          <td class="nonepast10">&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                          <td>&nbsp;</td>
                                        </tr>
    </table>
    </div>
    <a id='scLeft' href='#'>左移</a> <a id='scRight' href='#'>右移</a>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>
        var nowTH = 0, dv = $('#div_timegantt'), ths = dv.find('th'), thNum = ths.size(), maxScrollLeft = ths.parent().width() - dv.width()
        , startTH = '05:00';
        $('#scLeft,#scRight').click(function () {
            if (arguments.length < 2) nowTH += this.id == 'scLeft' ? -1 : 1;
            if (nowTH < 0) { nowTH = 0; return false }
            var scrollLeft = 0;
            ths.each(function (i, el) { if (i >= nowTH) return false; scrollLeft += ths.eq(i).width(); });
            if (scrollLeft > maxScrollLeft) nowTH--;
            dv.attr('scrollLeft', scrollLeft);        return false;
        });
        $(function () {
            if (startTH != '') {
                nowTH = ths.filter(':contains("' + startTH + '")').index();
                if (nowTH != -1) $('#scLeft').trigger('click', 'init');
                else nowTH = 0;   //找不到开始的th对象则还是从0开始
            }
        });
    </script>
    </body>
    </html>