zoukankan      html  css  js  c++  java
  • [原]长表头表格 竖直仅滚动内容区 水平滚动表头和内容区

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     
    <HEAD>
      
    <TITLE>scroll test</TITLE>
      
    <META NAME="Generator" CONTENT="EditPlus">
      
    <META NAME="Author" CONTENT="">
      
    <META NAME="Keywords" CONTENT="">
      
    <META NAME="Description" CONTENT="">
      
      
    <style>
        #head
    {width:900;}
        #head th
    {width:100;}
        #body
    {width:900;}
        #body td
    {width:100;}
        #scroll
    {width:917;display:hidden;}    
        
        #divHead
    {width:300;height:20;overflow:hidden;}
        #divBody
    {width:317;height:100;overflow-x:hidden;overflow-y:scroll;}
        #divScroll
    {width:317;height:20;overflow-x:scroll;overflow-y:hidden}
      
    </style>
      
      
    <script language="javascript">
        
    function scroll(src)
        
    {
        
    //debugger;
            //document.all('div2').style.overflowX = 'visible';
            document.all('divHead').scrollLeft = src.scrollLeft;
            document.all('divBody').scrollLeft 
    = src.scrollLeft;
        }

        
    //计算滚动条的宽度
        window.onload=function()
        
    {
            
    var obj = document.all('scrollbar');
            
    //debugger;
            var scrollWidth = obj.offsetWidth - obj.clientWidth;
            
    //alert(scrollWidth); //---- 17px
            obj.style.display = "none";
        }

      
    </script>
      
     
    </HEAD>

     
    <BODY>
        
    <center>
            
    <textarea id="scrollbar" style="visibility:hidden; border-0;"></textarea>
            
    <table>
                
    <tr>
                    
    <td>
                        
    <div id="divHead">
                            
    <table border="1" id="head">
                                
    <tr>
                                    
    <th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th><th>G</th><th>H</th><th>I</th>
                                
    </tr>
                            
    </table>
                        
    </div>
                    
    </td>
                
    </tr>
                
    <tr>
                    
    <td>
                        
    <div id="divBody">
                            
    <table border="1" id="body">
                                
    <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td></tr>
                                
    <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td></tr>
                                
    <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td></tr>
                                
    <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td></tr>
                                
    <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td></tr>
                                
    <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td></tr>
                                
    <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td></tr>
                                
    <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td></tr>
                                
    <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td></tr>
                                
    <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td></tr>
                                
    <tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td><td>f</td><td>g</td><td>h</td><td>i</td></tr>
                            
    </table>
                        
    </div>
                    
    </td>
                
    </tr>
                
    <tr>
                    
    <td>
                        
    <div id="divScroll" onscroll="scroll(this)">
                            
    <div id="scroll"></div>
                        
    </div>
                    
    </td>
                
    </tr>
            
    </table>
        
    </center>
     
    </BODY>
    </HTML>
  • 相关阅读:
    ubuntu 10.04安装增强功能 共享文件夹
    CRF简介入门
    Ant 的build.xml 详解
    eclipse中各种颜色和背景的设置
    第13章 类继承 --抽象基类
    第13章 类继承
    团队开发之绩效考核二
    站立会议
    团队站立会议
    团队开发站立会议
  • 原文地址:https://www.cnblogs.com/focus/p/917558.html
Copyright © 2011-2022 走看看