表格头固定而列可滚动的效果

209 阅读 0 评论 138 点赞

我是靠谱客的博主大力铃铛，最近开发中收集的这篇文章主要介绍表格头固定而列可滚动的效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

对于经常需要表格头部不东，而列表可以滚动，多用于数据比较多的情况，方便查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>表格头固定而列可滚动的效果-脚本之家</title>
</head> 
<style type="text/css"> 
body {  
    font-family: "arial", "helvetica", "sans-serif", "";  
    font-size: 9pt;  
    margin: 0px; 
    scrollbar-face-color:#efefe7; 
    scrollbar-highlight-color:#ffffff; 
    scrollbar-3dlight-color:#a5a5a5; 
    scrollbar-darkshadow-color:#a5a5a5; 
    scrollbar-shadow-color:#d6d6ce; 
    scrollbar-arrow-color:#003184; 
    scrollbar-track-color:#deded6; 
    } 
table {  
    font-family: "arial", "helvetica", "sans-serif","";  
    font-size: 9pt;  
    line-height: 150%;  
    color: #000000; 
         } 
.display-tb2 
{ 
    border-right: #808080 1px solid;  
    border-top: #808080 1px solid;  
    border-left: #808080 1px solid;  
    border-bottom: #808080 1px solid; 
    border:0; 
    cellpadding:2; 
    cellspacing:0; 
    margin-top:2px; 
    border-collapse:collapse; 
} 
div.tableContainer 
{ 
    overflow-x:auto; 
    width:760px; 
    dyn-behavior:expression( 
        onscroll == null? 
            (onscroll = function(){ 
                if(event.srcElement.scrollLeft == event.srcElement.oldScroll) return; 
                var oGridBody = document.getElementById("order_GridBody"); 
                oGridBody.style.width = parseInt(event.srcElement.clientWidth) + event.srcElement.scrollLeft + "px"; 
                event.srcElement.oldScroll == event.srcElement.scrollLeft; 
            }):true, 
        onmousedown == null? 
            (onmousedown = function(){ 
                    if(self.currentTH != null) return; 
                    var obj = document.elementFromPoint(event.x,event.y); 
                    var objL = document.elementFromPoint(event.x - 1,event.y);

if(obj.tagName.toLowerCase() == "th")  
                    { 
                     
                        if(objL.tagName.toLowerCase() == "th") 
                        { 
                            obj = objL; 
                        } 
                        if(obj.className == "fixed") return; 
                        self.currentX = event.x; 
                        self.currentTH = obj.childNodes[0]; 
                        self.currentTH.setCapture(); 
                    } 
            }):true, 
        onmouseup == null? 
            (onmouseup = function(){ 
                    if(self.currentTH != null) 
                    { 
                        self.currentTH.releaseCapture(); 
                        self.currentTH = null; 
                    }     
            }):true, 
        onmousemove == null? 
            (onmousemove = function(){ 
                    if(self.currentTH != null) 
                    { 
                        var width = Math.round(parseInt(self.currentTH.clientWidth) + event.x - self.currentX); 
                        if(width < 0) width = 0; 
                        var dt = parseInt(self.currentTH.style.width) - width; 
                        self.currentTH.style.width = width; 
                        __resizeCell(self.currentTH.columnIndex,self.currentTH.style.width); 
                        self.currentX = event.x; 
                    } 
            }):true, 
        self.__resizeCell == null? 
            (self.__resizeCell = function(idx, width){ 
                    var cells = document.getElementById("order_GridBody_Cells"); 
                    var rows = cells.childNodes; 
                    var i = 0; 
                    for (var i = 0; i < rows.length; i++) 
                    { 
                        var cell = rows[i].childNodes[idx].childNodes[0]; 
                        var resetPattern = /style=[^stn]+/; 
                        cell.outerHTML = cell.outerHTML.toString().replace(resetPattern, "style='width:" +width + "'"); 
                    } 
            }):true 
    ) 
} 
div.bodyContainer 
{ 
    height:250px; 
    width:760px; 
    overflow-x:hidden; 
    overflow-y:auto; 
} 
div.gridCell_standard 
{ 
    width:100px; 
    overflow:hidden; 
    nw:expression(this.noWrap=true); 
    margin-left: 0px; 
    margin-right: 1px; 
    padding-left: 2px; 
    cursor:default; 
} 
div.gridCell_narrow 
{ 
    width:30px; 
    overflow:hidden; 
    margin-left: 0px; 
    margin-right: 1px; 
    padding-left: 2px; 
    nw:expression(this.noWrap=true); 
    cursor:default; 
} 
th  
{ 
    border-right: #a4a6a4 1px solid;  
    border-top: #a4a6a4 1px solid;  
    border-left: #a4a6a4 1px solid;  
    border-bottom: #a4a6a4 1px solid; 
    background-image: url(images/default/headerbg.gif); 
                color:#ffffff; 
    font-style:normal; 
    font-weight:normal; 
    height:20px; 
    cursor:col-resize; 
    dyn-behavior:expression( 
        ondblclick == null? 
            (ondblclick = function() 
            { 
                var src = event.srcElement; 
                if(event.srcElement.tagName.toLowerCase()!="div") 
                { 
                    src = src.childNodes[0]; 
                } 
                src.style.width = ""; 
                __resizeCell(src.columnIndex,src.clientWidth); 
            }):true 
    ) 
} 
th.fixed 
{ 
    border-right: #a4a6a4 1px solid;  
    border-top: #a4a6a4 1px solid;  
    border-left: #a4a6a4 1px solid;  
    border-bottom: #a4a6a4 1px solid; 
    background-image: url(images/default/headerbg.gif); 
                color:#ffffff; 
    font-style:normal; 
    font-weight:normal; 
    height:20px; 
    cursor:default; 
} 
tr.odd  
{ 
  border-right: #a4a6a4 1px solid;  
    border-top: #a4a6a4 0px solid;  
    border-left: #a4a6a4 0px solid;  
    border-bottom: #a4a6a4 1px solid; 
    noWrap; 
} 
tr.even  
{ 
  border-right: #a4a6a4 1px solid;  
    border-top: #a4a6a4 0px solid;  
    border-left: #a4a6a4 0px solid;  
    border-bottom: #a4a6a4 1px solid; 
} 
td.odd_even 
{ 
  border-right: #a4a6a4 1px solid;  
    border-top: #a4a6a4 1px solid;  
    border-left: #a4a6a4 1px solid;  
    border-bottom: #a4a6a4 1px solid; 
    noWrap; 
} 
td.select-cell 
{ 
  border-right: #a4a6a4 1px solid;  
    border-top: #a4a6a4 1px solid;  
    border-left: #a4a6a4 1px solid;  
    border-bottom: #a4a6a4 1px solid; 
} 
th{ 
  color:#ff0000; 
} 
</style>

<div class="tableContainer" id="order_Container"> 
 
    <table cellpadding="0" class="display-tb2" style="margin-top: 2px;" cellspacing="0" border="0" id="order"> 
    <tr> 
    <td> 
    <table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0"> 
        <thead> 
            <th class="fixed"><div columnIndex="0" class="gridCell_narrow">选择</div></th> 
            <th><div columnIndex="1" class="gridCell_standard">订单编号</div></th> 
            <th><div columnIndex="2" class="gridCell_standard">订货日期</div></th> 
            <th><div columnIndex="3" class="gridCell_standard">订货单位</div></th> 
            <th><div columnIndex="4" class="gridCell_standard">订单类别</div></th> 
            <th><div columnIndex="5" class="gridCell_standard">产品类别</div></th> 
            <th><div columnIndex="6" class="gridCell_standard">版本号</div></th> 
            <th><div columnIndex="7" class="gridCell_standard">订货金额</div></th> 
            <th><div columnIndex="8" class="gridCell_standard">订单状态</div></th> 
        </thead> 
    </table> 
    </td> 
    </tr> 
     
    <tbody> 
    <tr class="odd"> 
    <td colspan="9"> 
    <div id="order_GridBody" class="bodyContainer"> 
    <table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0"> 
    <tbody id="order_GridBody_Cells"> 
    <tr class="even"> 
    <td width="30px" class="select-cell"> 
         <div class="gridCell_narrow"><input type="checkbox" name="id" value="2" /></div></td> 
    <td class="odd_even"><div class="gridCell_standard">DJPH001</div></td> 
    <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td> 
    <td class="odd_even"><div class="gridCell_standard">19</div></td> 
    <td class="odd_even"><div class="gridCell_standard">直销</div></td> 
    <td class="odd_even"><div class="gridCell_standard">KIS</div></td> 
    <td class="odd_even"><div class="gridCell_standard">5</div></td> 
    <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> 
    <td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr> 
    <tr class="even"> 
    <td width="30px" class="select-cell"> 
           <div class="gridCell_narrow"><input type="checkbox" name="id" value="3" /></div> </td> 
    <td class="odd_even"><div class="gridCell_standard">DJPH001</div></td> 
    <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td> 
    <td class="odd_even"><div class="gridCell_standard">19</div></td> 
    <td class="odd_even"><div class="gridCell_standard">购销</div></td> 
    <td class="odd_even"><div class="gridCell_standard">KIS</div></td> 
    <td class="odd_even"><div class="gridCell_standard">5</div></td> 
    <td class="odd_even"><div class="gridCell_standard">21.0000</div></td> 
    <td class="odd_even"><div class="gridCell_standard"> </div></td></tr> 
    <tr class="odd"> 
    <td width="30px" class="select-cell"> 
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="4" /></div> </td> 
    <td class="odd_even"><div class="gridCell_standard">DJPH889</div></td> 
    <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td> 
    <td class="odd_even"><div class="gridCell_standard">0</div></td> 
    <td class="odd_even"><div class="gridCell_standard">购销</div></td> 
    <td class="odd_even"><div class="gridCell_standard">KIS</div></td> 
    <td class="odd_even"><div class="gridCell_standard">5</div></td> 
    <td class="odd_even"><div class="gridCell_standard">21.0000</div></td> 
    <td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr> 
    <tr class="even"> 
    <td width="30px" class="select-cell"> 
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="5" /></div> </td> 
    <td class="odd_even"><div class="gridCell_standard">DJPH889</div></td> 
    <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td> 
    <td class="odd_even"><div class="gridCell_standard">0</div></td> 
    <td class="odd_even"><div class="gridCell_standard">直销</div></td> 
    <td class="odd_even"><div class="gridCell_standard">KIS</div></td> 
    <td class="odd_even"><div class="gridCell_standard">5</div></td> 
    <td class="odd_even"><div class="gridCell_standard">1.0000</div></td> 
    <td class="odd_even"><div class="gridCell_standard"> </div></td></tr> 
    <tr class="odd"> 
    <td width="30px" class="select-cell"> 
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="6" /></div> </td> 
    <td class="odd_even"><div class="gridCell_standard">tytutyjh465456</div></td> 
    <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td> 
    <td class="odd_even"><div class="gridCell_standard">0</div></td> 
    <td class="odd_even"><div class="gridCell_standard">购销</div></td> 
    <td class="odd_even"><div class="gridCell_standard">KIS</div></td> 
    <td class="odd_even"><div class="gridCell_standard">0</div></td> 
    <td class="odd_even"><div class="gridCell_standard">21.0000</div></td> 
    <td class="odd_even"><div class="gridCell_standard">生产部已审核</div></td></tr> 
    <tr class="even"> 
    <td width="30px" class="select-cell"> 
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="7" /></div> </td> 
    <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> 
    <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> 
    <td class="odd_even"><div class="gridCell_standard">-1</div></td> 
    <td class="odd_even"><div class="gridCell_standard">分销</div></td> 
    <td class="odd_even"><div class="gridCell_standard">KIS</div></td> 
    <td class="odd_even"><div class="gridCell_standard">10.2</div></td> 
    <td class="odd_even"><div class="gridCell_standard">21.0000</div></td> 
    <td class="odd_even"><div class="gridCell_standard">生产部已审核</div></td></tr> 
    <tr class="odd"> 
    <td width="30px" class="select-cell"> 
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="8" /></div> </td> 
    <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> 
    <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> 
    <td class="odd_even"><div class="gridCell_standard">-1</div></td> 
    <td class="odd_even"><div class="gridCell_standard">分销</div></td> 
    <td class="odd_even"><div class="gridCell_standard">KIS</div></td> 
    <td class="odd_even"><div class="gridCell_standard">10.2</div></td> 
    <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> 
    <td class="odd_even"><div class="gridCell_standard">总代已审核</div></td></tr> 
    <tr class="even"> 
    <td width="30px" class="select-cell"> 
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="9" /></div> </td> 
    <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> 
    <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> 
    <td class="odd_even"><div class="gridCell_standard">-1</div></td> 
    <td class="odd_even"><div class="gridCell_standard">分销</div></td> 
    <td class="odd_even"><div class="gridCell_standard">KIS</div></td> 
    <td class="odd_even"><div class="gridCell_standard">10.2</div></td> 
    <td class="odd_even"><div class="gridCell_standard">32.0000</div></td> 
    <td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr> 
    <tr class="odd"> 
    <td width="30px" class="select-cell"> 
         <div class="gridCell_narrow"><input type="checkbox" name="id" value="10" /></div> </td> 
    <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> 
    <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> 
    <td class="odd_even"><div class="gridCell_standard">-1</div></td> 
    <td class="odd_even"><div class="gridCell_standard">分销</div></td> 
    <td class="odd_even"><div class="gridCell_standard">KIS</div></td> 
    <td class="odd_even"><div class="gridCell_standard">10.2</div></td> 
    <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> 
    <td class="odd_even"><div class="gridCell_standard"> </div></td></tr> 
    <tr class="even"> 
    <td width="30px" class="select-cell"> 
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="11" /></div> </td> 
    <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> 
    <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> 
    <td class="odd_even"><div class="gridCell_standard">-1</div></td> 
    <td class="odd_even"><div class="gridCell_standard">分销</div></td> 
    <td class="odd_even"><div class="gridCell_standard">KIS</div></td> 
    <td class="odd_even"><div class="gridCell_standard">10.2</div></td> 
    <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> 
    <td class="odd_even"><div class="gridCell_standard"> </div></td></tr> 
    <tr class="odd"> 
    <td width="30px" class="select-cell"> 
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="12" /></div> </td> 
    <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> 
    <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> 
    <td class="odd_even"><div class="gridCell_standard">-1</div></td> 
    <td class="odd_even"><div class="gridCell_standard">分销</div></td> 
    <td class="odd_even"><div class="gridCell_standard">KIS</div></td> 
    <td class="odd_even"><div class="gridCell_standard">10.2</div></td> 
    <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> 
    <td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr> 
    <tr class="even"> 
    <td width="30px" class="select-cell"> 
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="13" /></div> </td> 
    <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> 
    <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> 
    <td class="odd_even"><div class="gridCell_standard">-1</div></td> 
    <td class="odd_even"><div class="gridCell_standard">分销</div></td> 
    <td class="odd_even"><div class="gridCell_standard">KIS</div></td> 
    <td class="odd_even"><div class="gridCell_standard">10.2</div></td> 
    <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> 
    <td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr> 
    <tr class="odd"> 
    <td width="30px" class="select-cell"> 
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="14" /></div> </td> 
    <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> 
    <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> 
    <td class="odd_even"><div class="gridCell_standard">-1</div></td> 
    <td class="odd_even"><div class="gridCell_standard">分销</div></td> 
    <td class="odd_even"><div class="gridCell_standard">KIS</div></td> 
    <td class="odd_even"><div class="gridCell_standard">10.2</div></td> 
    <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> 
    <td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr> 
    <tr class="even"> 
    <td width="30px" class="select-cell"> 
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="15" /></div> </td> 
    <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> 
    <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> 
    <td class="odd_even"><div class="gridCell_standard">-1</div></td> 
    <td class="odd_even"><div class="gridCell_standard">分销</div></td> 
    <td class="odd_even"><div class="gridCell_standard">KIS</div></td> 
    <td class="odd_even"><div class="gridCell_standard">10.2</div></td> 
    <td class="odd_even"><div class="gridCell_standard">21.0000</div></td> 
    <td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr> 
    <tr class="odd"> 
    <td width="30px" class="select-cell"> 
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="16" /></div> </td> 
    <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td> 
    <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td> 
    <td class="odd_even"><div class="gridCell_standard">-1</div></td> 
    <td class="odd_even"><div class="gridCell_standard">分销</div></td> 
    <td class="odd_even"><div class="gridCell_standard">KIS</div></td> 
    <td class="odd_even"><div class="gridCell_standard">10.2</div></td> 
    <td class="odd_even"><div class="gridCell_standard">12.0000</div></td> 
    <td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr> 
     
    </tbody> 
    </table> 
    </div> 
    </td> 
    </tr> 
    </tbody> 
    </table> 
    <div style="height:15px"></div> 
</div> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]