The effect of fixed table headers while scrolling Columns

The table header is usually not east, and the list can be rolled. It is often used in cases with a large amount of data for easy viewing.
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"> <ptml> <pead> <title> fixed table headers and scrollable column effects-script house </title> </pead> <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; scrol Lbar-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-r Ight: # 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 "> select </th> <th> order number </th> <th> order Date </th> <th> order unit </th> <th> order type </th> <th> product type </th> <th> Version Number </th> <th> order amount </th> <th> order status </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"> </td> <td class = "odd_even"> 19 </td> <td class = "odd_even"> direct sales </td> <td class = "odd_even"> KIS </td> <td class = "odd_even"> 5 </td> <td class = "odd_even"> 12.0000 </td> <td class = "odd_even"> canceled </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 "> </td> <td class =" odd_even "> 19 </td> <td class =" odd_even "> Purchase and Sale </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"> </td> <td class = "odd_even"> 0 </td> <td class = "odd_even"> Purchase and Sale </td> <td class = "odd_even"> KIS </td> <td class = "odd_even"> 5 </td> <td class = "odd_even"> 21.0000 </td> <td class = "odd_even"> canceled </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 "> direct sales </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"> </td> <td class = "odd_even"> 0 </td> <td class = "odd_even"> Purchase and Sale </td> <td class = "odd_even"> KIS </td> <td class = "odd_even"> 0 </td> <td class = "odd_even"> 21.0000 </td> <td class = "odd_even"> approved by the production department </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"> distribution </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"> approved by the production department </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 "> distribution </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 "> the total generation has been reviewed </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"> distribution </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"> canceled </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"> distribution </ 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"> distribution </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"> distribution </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"> canceled </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 "> </td> <td class = "odd_even">-1 </td> <td class = "odd_even"> distribution </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"> canceled </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 "> distribution </td> <td class =" odd_even "> KIS </td> <td class =" 10.2 </td> <td class = "odd_even"> 12.0000 </td> <td class = "odd_even"> canceled </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"> distribution </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"> canceled </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"> </td> <td class = "odd_even">-1 </td> <td class = "odd_even"> distribution </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"> canceled </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]