对于经常需要表格头部不东，而列表可以滚动，多用于数据比较多的情况，方便查看
表格头固定而列可滚动的效果- 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\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; } 选择 订单编号 订货日期 订货单位 订单类别 产品类别 版本号 订货金额 订单状态 DJPH001 2005-02-02 19 直销 KIS 5 12.0000 已取消 DJPH001 2005-02-02 19 购销 KIS 5 21.0000 DJPH889 2005-02-02 0 购销 KIS 5 21.0000 已取消 DJPH889 2005-02-02 0 直销 KIS 5 1.0000 tytutyjh465456 2005-02-02 0 购销 KIS 0 21.0000 生产部已审核 KDSZ2005050698 2005-05-05 -1 分销 KIS 10.2 21.0000 生产部已审核 KDSZ2005050698 2005-05-05 -1 分销 KIS 10.2 12.0000 总代已审核 KDSZ2005050698 2005-05-05 -1 分销 KIS 10.2 32.0000 已取消 KDSZ2005050698 2005-05-05 -1 分销 KIS 10.2 12.0000 KDSZ2005050698 2005-05-05 -1 分销 KIS 10.2 12.0000 KDSZ2005050698 2005-05-05 -1 分销 KIS 10.2 12.0000 已取消 KDSZ2005050698 2005-05-05 -1 分销 KIS 10.2 12.0000 已取消 KDSZ2005050698 2005-05-05 -1 分销 KIS 10.2 12.0000 已取消 KDSZ2005050698 2005-05-05 -1 分销 KIS 10.2 21.0000 已取消 KDSZ2005050698 2005-05-05 -1 分销 KIS 10.2 12.0000 已取消 [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]