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

对于经常需要表格头部不东，而列表可以滚动，多用于数据比较多的情况，方便查看
</p> <p><title>表格头固定而列可滚动的<a href="https://www.kunjuke.com/tag/44/" title="效果" target="_blank">效果</a>-北冥有鱼</title></p> <p>body {<br /> font-family: "arial", "helvetica", "sans-serif", "";<br /> font-size: 9pt;<br /> margin: 0px;<br /> scrollbar-face-color:#efefe7;<br /> scrollbar-highlight-color:#ffffff;<br /> scrollbar-3dlight-color:#a5a5a5;<br /> scrollbar-darkshadow-color:#a5a5a5;<br /> scrollbar-shadow-color:#d6d6ce;<br /> scrollbar-arrow-color:#003184;<br /> scrollbar-track-color:#deded6;<br /> }<br /> table {<br /> font-family: "arial", "helvetica", "sans-serif","";<br /> font-size: 9pt;<br /> line-height: 150%;<br /> color: #000000;<br /> }<br /> .display-tb2<br /> {<br /> border-right: #808080 1px solid;<br /> border-top: #808080 1px solid;<br /> border-left: #808080 1px solid;<br /> border-bottom: #808080 1px solid;<br /> border:0;<br /> cellpadding:2;<br /> cellspacing:0;<br /> margin-top:2px;<br /> border-collapse:collapse;<br /> }<br /> div.tableContainer<br /> {<br /> overflow-x:auto;<br /> width:760px;<br /> dyn-behavior:expression(<br /> onscroll == null?<br /> (onscroll = function(){<br /> if(event.srcElement.scrollLeft == event.srcElement.oldScroll) return;<br /> var oGridBody = document.getElementById("order_GridBody");<br /> oGridBody.style.width = parseInt(event.srcElement.clientWidth) + event.srcElement.scrollLeft + "px";<br /> event.srcElement.oldScroll == event.srcElement.scrollLeft;<br /> }):true,<br /> onmousedown == null?<br /> (onmousedown = function(){<br /> if(self.currentTH != null) return;<br /> var obj = document.elementFromPoint(event.x,event.y);<br /> var objL = document.elementFromPoint(event.x - 1,event.y); </p> <p> if(obj.tagName.toLowerCase() == "th")<br /> { </p> <p> if(objL.tagName.toLowerCase() == "th")<br /> {<br /> obj = objL;<br /> }<br /> if(obj.className == "fixed") return;<br /> self.currentX = event.x;<br /> self.currentTH = obj.childNodes[0];<br /> self.currentTH.setCapture();<br /> }<br /> }):true,<br /> onmouseup == null?<br /> (onmouseup = function(){<br /> if(self.currentTH != null)<br /> {<br /> self.currentTH.releaseCapture();<br /> self.currentTH = null;<br /> }<br /> }):true,<br /> onmousemove == null?<br /> (onmousemove = function(){<br /> if(self.currentTH != null)<br /> {<br /> var width = Math.round(parseInt(self.currentTH.clientWidth) + event.x - self.currentX);<br /> if(width < 0) width = 0;<br /> var dt = parseInt(self.currentTH.style.width) - width;<br /> self.currentTH.style.width = width;<br /> __resizeCell(self.currentTH.columnIndex,self.currentTH.style.width);<br /> self.currentX = event.x;<br /> }<br /> }):true,<br /> self.__resizeCell == null?<br /> (self.__resizeCell = function(idx, width){<br /> var cells = document.getElementById("order_GridBody_Cells");<br /> var rows = cells.childNodes;<br /> var i = 0;<br /> for (var i = 0; i < rows.length; i++)<br /> {<br /> var cell = rows[i].childNodes[idx].childNodes[0];<br /> var resetPattern = /style=[^\s\t\n]+/;<br /> cell.outerHTML = cell.outerHTML.toString().replace(resetPattern, "style='width:" +width + "'");<br /> }<br /> }):true<br /> )<br /> }<br /> div.bodyContainer<br /> {<br /> height:250px;<br /> width:760px;<br /> overflow-x:hidden;<br /> overflow-y:auto;<br /> }<br /> div.gridCell_standard<br /> {<br /> width:100px;<br /> overflow:hidden;<br /> nw:expression(this.noWrap=true);<br /> margin-left: 0px;<br /> margin-right: 1px;<br /> padding-left: 2px;<br /> cursor:default;<br /> }<br /> div.gridCell_narrow<br /> {<br /> width:30px;<br /> overflow:hidden;<br /> margin-left: 0px;<br /> margin-right: 1px;<br /> padding-left: 2px;<br /> nw:expression(this.noWrap=true);<br /> cursor:default;<br /> }<br /> th<br /> {<br /> border-right: #a4a6a4 1px solid;<br /> border-top: #a4a6a4 1px solid;<br /> border-left: #a4a6a4 1px solid;<br /> border-bottom: #a4a6a4 1px solid;<br /> background-image: url(images/default/headerbg.gif);<br /> color:#ffffff;<br /> font-style:normal;<br /> font-weight:normal;<br /> height:20px;<br /> cursor:col-resize;<br /> dyn-behavior:expression(<br /> ondblclick == null?<br /> (ondblclick = function()<br /> {<br /> var src = event.srcElement;<br /> if(event.srcElement.tagName.toLowerCase()!="div")<br /> {<br /> src = src.childNodes[0];<br /> }<br /> src.style.width = "";<br /> __resizeCell(src.columnIndex,src.clientWidth);<br /> }):true<br /> )<br /> }<br /> th.fixed<br /> {<br /> border-right: #a4a6a4 1px solid;<br /> border-top: #a4a6a4 1px solid;<br /> border-left: #a4a6a4 1px solid;<br /> border-bottom: #a4a6a4 1px solid;<br /> background-image: url(images/default/headerbg.gif);<br /> color:#ffffff;<br /> font-style:normal;<br /> font-weight:normal;<br /> height:20px;<br /> cursor:default;<br /> }<br /> tr.odd<br /> {<br /> border-right: #a4a6a4 1px solid;<br /> border-top: #a4a6a4 0px solid;<br /> border-left: #a4a6a4 0px solid;<br /> border-bottom: #a4a6a4 1px solid;<br /> noWrap;<br /> }<br /> tr.even<br /> {<br /> border-right: #a4a6a4 1px solid;<br /> border-top: #a4a6a4 0px solid;<br /> border-left: #a4a6a4 0px solid;<br /> border-bottom: #a4a6a4 1px solid;<br /> }<br /> td.odd_even<br /> {<br /> border-right: #a4a6a4 1px solid;<br /> border-top: #a4a6a4 1px solid;<br /> border-left: #a4a6a4 1px solid;<br /> border-bottom: #a4a6a4 1px solid;<br /> noWrap;<br /> }<br /> td.select-cell<br /> {<br /> border-right: #a4a6a4 1px solid;<br /> border-top: #a4a6a4 1px solid;<br /> border-left: #a4a6a4 1px solid;<br /> border-bottom: #a4a6a4 1px solid;<br /> }<br /> th{<br /> color:#ff0000;<br /> } </p> <p><!--动态表格--> </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">选择</th> <th>订单编号</th> <th>订货日期</th> <th>订货单位</th> <th>订单类别</th> <th>产品类别</th> <th>版本号</th> <th>订货金额</th> <th>订单状态</th> </thead> </table> </td> </tr> <p> <!--</p> <tfoot> 共3页 </tfoot> <p>--> </p> <tbody> <tr class="odd"> <td colspan="9"> <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"> </td> <td class="odd_even">DJPH001</td> <td class="odd_even">2005-02-02</td> <td class="odd_even">19</td> <td class="odd_even">直销</td> <td class="odd_even">KIS</td> <td class="odd_even">5</td> <td class="odd_even">12.0000</td> <td class="odd_even">已取消</td> </tr> <tr class="even"> <td width="30px" class="select-cell"> </td> <td class="odd_even">DJPH001</td> <td class="odd_even">2005-02-02</td> <td class="odd_even">19</td> <td class="odd_even">购销</td> <td class="odd_even">KIS</td> <td class="odd_even">5</td> <td class="odd_even">21.0000</td> <td class="odd_even"> </td> </tr> <tr class="odd"> <td width="30px" class="select-cell"> </td> <td class="odd_even">DJPH889</td> <td class="odd_even">2005-02-02</td> <td class="odd_even">0</td> <td class="odd_even">购销</td> <td class="odd_even">KIS</td> <td class="odd_even">5</td> <td class="odd_even">21.0000</td> <td class="odd_even">已取消</td> </tr> <tr class="even"> <td width="30px" class="select-cell"> </td> <td class="odd_even">DJPH889</td> <td class="odd_even">2005-02-02</td> <td class="odd_even">0</td> <td class="odd_even">直销</td> <td class="odd_even">KIS</td> <td class="odd_even">5</td> <td class="odd_even">1.0000</td> <td class="odd_even"> </td> </tr> <tr class="odd"> <td width="30px" class="select-cell"> </td> <td class="odd_even">tytutyjh465456</td> <td class="odd_even">2005-02-02</td> <td class="odd_even">0</td> <td class="odd_even">购销</td> <td class="odd_even">KIS</td> <td class="odd_even">0</td> <td class="odd_even">21.0000</td> <td class="odd_even">生产部已审核</td> </tr> <tr class="even"> <td width="30px" class="select-cell"> </td> <td class="odd_even">KDSZ2005050698</td> <td class="odd_even">2005-05-05</td> <td class="odd_even">-1</td> <td class="odd_even">分销</td> <td class="odd_even">KIS</td> <td class="odd_even">10.2</td> <td class="odd_even">21.0000</td> <td class="odd_even">生产部已审核</td> </tr> <tr class="odd"> <td width="30px" class="select-cell"> </td> <td class="odd_even">KDSZ2005050698</td> <td class="odd_even">2005-05-05</td> <td class="odd_even">-1</td> <td class="odd_even">分销</td> <td class="odd_even">KIS</td> <td class="odd_even">10.2</td> <td class="odd_even">12.0000</td> <td class="odd_even">总代已审核</td> </tr> <tr class="even"> <td width="30px" class="select-cell"> </td> <td class="odd_even">KDSZ2005050698</td> <td class="odd_even">2005-05-05</td> <td class="odd_even">-1</td> <td class="odd_even">分销</td> <td class="odd_even">KIS</td> <td class="odd_even">10.2</td> <td class="odd_even">32.0000</td> <td class="odd_even">已取消</td> </tr> <tr class="odd"> <td width="30px" class="select-cell"> </td> <td class="odd_even">KDSZ2005050698</td> <td class="odd_even">2005-05-05</td> <td class="odd_even">-1</td> <td class="odd_even">分销</td> <td class="odd_even">KIS</td> <td class="odd_even">10.2</td> <td class="odd_even">12.0000</td> <td class="odd_even"> </td> </tr> <tr class="even"> <td width="30px" class="select-cell"> </td> <td class="odd_even">KDSZ2005050698</td> <td class="odd_even">2005-05-05</td> <td class="odd_even">-1</td> <td class="odd_even">分销</td> <td class="odd_even">KIS</td> <td class="odd_even">10.2</td> <td class="odd_even">12.0000</td> <td class="odd_even"> </td> </tr> <tr class="odd"> <td width="30px" class="select-cell"> </td> <td class="odd_even">KDSZ2005050698</td> <td class="odd_even">2005-05-05</td> <td class="odd_even">-1</td> <td class="odd_even">分销</td> <td class="odd_even">KIS</td> <td class="odd_even">10.2</td> <td class="odd_even">12.0000</td> <td class="odd_even">已取消</td> </tr> <tr class="even"> <td width="30px" class="select-cell"> </td> <td class="odd_even">KDSZ2005050698</td> <td class="odd_even">2005-05-05</td> <td class="odd_even">-1</td> <td class="odd_even">分销</td> <td class="odd_even">KIS</td> <td class="odd_even">10.2</td> <td class="odd_even">12.0000</td> <td class="odd_even">已取消</td> </tr> <tr class="odd"> <td width="30px" class="select-cell"> </td> <td class="odd_even">KDSZ2005050698</td> <td class="odd_even">2005-05-05</td> <td class="odd_even">-1</td> <td class="odd_even">分销</td> <td class="odd_even">KIS</td> <td class="odd_even">10.2</td> <td class="odd_even">12.0000</td> <td class="odd_even">已取消</td> </tr> <tr class="even"> <td width="30px" class="select-cell"> </td> <td class="odd_even">KDSZ2005050698</td> <td class="odd_even">2005-05-05</td> <td class="odd_even">-1</td> <td class="odd_even">分销</td> <td class="odd_even">KIS</td> <td class="odd_even">10.2</td> <td class="odd_even">21.0000</td> <td class="odd_even">已取消</td> </tr> <tr class="odd"> <td width="30px" class="select-cell"> </td> <td class="odd_even">KDSZ2005050698</td> <td class="odd_even">2005-05-05</td> <td class="odd_even">-1</td> <td class="odd_even">分销</td> <td class="odd_even">KIS</td> <td class="odd_even">10.2</td> <td class="odd_even">12.0000</td> <td class="odd_even">已取消</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章:

• CSS网页布局入门教程1：一列固定宽度
• CSS网页布局入门教程3：一列固定宽度居中
• CSS网页布局入门教程4：二列固定宽度
• CSS网页布局入门教程6：左列固定，右列宽度自适应
• 基于jquery的固定表头和列头的代码
• android开发之横向滚动/竖向滚动的ListView(固定列头)
• asp.net gridview列宽固定的几种方法介绍
• HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列