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

现在的位置: 首页 > 综合 > 正文

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

2012年08月03日 ⁄ 综合 ⁄ 共 4560字 ⁄ 字号小中大 ⁄ 评论关闭

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

<br />
<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); </p>
<p>                    if(obj.tagName.toLowerCase() == "th")  
                    { </p>
<p>                        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=[^\s\t\n]+/; 
                        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">
 </p>
<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>
<p><!--
<tfoot> 共3页 </tfoot>

--><br />
<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>
<p>

【上篇】MVC3中输出Html标签的方法
【下篇】The third paper was accepted.

作者: instruct

该日志由 instruct 于12年前发表在综合分类下，最后更新于 2012年08月03日.
转载请注明: 表格头固定而列可滚动的效果 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

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

作者: instruct

书签

最新文章New

本站推荐

返回首页