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

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

<！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=[^s	
]+/; 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> <body bgcolor="F6F6F6" style="padding:10 10 10 10"> <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><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"><input type="checkbox" name="id" value="2" /></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"><input type="checkbox" name="id" value="3" /> </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"> <input type="checkbox" name="id" value="4" /> </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"> <input type="checkbox" name="id" value="5" /> </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"> <input type="checkbox" name="id" value="6" /> </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"> <input type="checkbox" name="id" value="7" /> </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"> <input type="checkbox" name="id" value="8" /> </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"> <input type="checkbox" name="id" value="9" /> </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"><input type="checkbox" name="id" value="10" /> </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"> <input type="checkbox" name="id" value="11" /> </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"> <input type="checkbox" name="id" value="12" /> </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"> <input type="checkbox" name="id" value="13" /> </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"> <input type="checkbox" name="id" value="14" /> </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"> <input type="checkbox" name="id" value="15" /> </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"> <input type="checkbox" name="id" value="16" /> </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> </body> </html>

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