表格頭固定而列可滾動的效果

2019-11-21 01:52:16

字體：大中小

來源：轉載

供稿：網友

對于經常需要表格頭部不東，而列表可以滾動，多用于數據比較多的情況，方便查看

<!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/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> <body bgcolor="F6F6F6" style="padding:10 10 10 10"> <div   id="iwvjtn8m0"   class="tableContainer" id="order_Container">      <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>          <tbody>     <tr class="odd">     <td colspan="9">     <div   class="iwvjtn8m0"   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   id="iwvjtn8m0"   class="gridCell_narrow"><input type="checkbox" name="id" value="2" /></div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">DJPH001</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">2005-02-02</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">19</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">直銷</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">5</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">12.0000</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">已取消</div></td></tr>     <tr class="even">     <td width="30px" class="select-cell">            <div   id="iwvjtn8m0"   class="gridCell_narrow"><input type="checkbox" name="id" value="3" /></div> </td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">DJPH001</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">2005-02-02</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">19</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">購銷</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">5</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">21.0000</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard"> </div></td></tr>     <tr class="odd">     <td width="30px" class="select-cell">           <div   id="iwvjtn8m0"   class="gridCell_narrow"><input type="checkbox" name="id" value="4" /></div> </td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">DJPH889</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">2005-02-02</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">0</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">購銷</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">5</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">21.0000</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">已取消</div></td></tr>     <tr class="even">     <td width="30px" class="select-cell">           <div   id="iwvjtn8m0"   class="gridCell_narrow"><input type="checkbox" name="id" value="5" /></div> </td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">DJPH889</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">2005-02-02</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">0</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">直銷</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">5</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">1.0000</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard"> </div></td></tr>     <tr class="odd">     <td width="30px" class="select-cell">           <div   id="iwvjtn8m0"   class="gridCell_narrow"><input type="checkbox" name="id" value="6" /></div> </td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">tytutyjh465456</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">2005-02-02</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">0</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">購銷</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">0</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">21.0000</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">生產部已審核</div></td></tr>     <tr class="even">     <td width="30px" class="select-cell">           <div   id="iwvjtn8m0"   class="gridCell_narrow"><input type="checkbox" name="id" value="7" /></div> </td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KDSZ2005050698</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">2005-05-05</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">-1</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">分銷</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">10.2</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">21.0000</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">生產部已審核</div></td></tr>     <tr class="odd">     <td width="30px" class="select-cell">           <div   id="iwvjtn8m0"   class="gridCell_narrow"><input type="checkbox" name="id" value="8" /></div> </td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KDSZ2005050698</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">2005-05-05</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">-1</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">分銷</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">10.2</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">12.0000</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">總代已審核</div></td></tr>     <tr class="even">     <td width="30px" class="select-cell">           <div   id="iwvjtn8m0"   class="gridCell_narrow"><input type="checkbox" name="id" value="9" /></div> </td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KDSZ2005050698</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">2005-05-05</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">-1</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">分銷</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">10.2</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">32.0000</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">已取消</div></td></tr>     <tr class="odd">     <td width="30px" class="select-cell">          <div   id="iwvjtn8m0"   class="gridCell_narrow"><input type="checkbox" name="id" value="10" /></div> </td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KDSZ2005050698</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">2005-05-05</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">-1</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">分銷</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">10.2</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">12.0000</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard"> </div></td></tr>     <tr class="even">     <td width="30px" class="select-cell">           <div   id="iwvjtn8m0"   class="gridCell_narrow"><input type="checkbox" name="id" value="11" /></div> </td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KDSZ2005050698</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">2005-05-05</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">-1</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">分銷</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">10.2</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">12.0000</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard"> </div></td></tr>     <tr class="odd">     <td width="30px" class="select-cell">           <div   id="iwvjtn8m0"   class="gridCell_narrow"><input type="checkbox" name="id" value="12" /></div> </td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KDSZ2005050698</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">2005-05-05</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">-1</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">分銷</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">10.2</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">12.0000</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">已取消</div></td></tr>     <tr class="even">     <td width="30px" class="select-cell">           <div   id="iwvjtn8m0"   class="gridCell_narrow"><input type="checkbox" name="id" value="13" /></div> </td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KDSZ2005050698</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">2005-05-05</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">-1</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">分銷</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">10.2</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">12.0000</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">已取消</div></td></tr>     <tr class="odd">     <td width="30px" class="select-cell">           <div   id="iwvjtn8m0"   class="gridCell_narrow"><input type="checkbox" name="id" value="14" /></div> </td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KDSZ2005050698</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">2005-05-05</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">-1</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">分銷</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">10.2</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">12.0000</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">已取消</div></td></tr>     <tr class="even">     <td width="30px" class="select-cell">           <div   id="iwvjtn8m0"   class="gridCell_narrow"><input type="checkbox" name="id" value="15" /></div> </td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KDSZ2005050698</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">2005-05-05</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">-1</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">分銷</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">10.2</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">21.0000</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">已取消</div></td></tr>     <tr class="odd">     <td width="30px" class="select-cell">           <div   id="iwvjtn8m0"   class="gridCell_narrow"><input type="checkbox" name="id" value="16" /></div> </td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KDSZ2005050698</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">2005-05-05</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">-1</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">分銷</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">10.2</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">12.0000</div></td>     <td class="odd_even"><div   id="iwvjtn8m0"   class="gridCell_standard">已取消</div></td></tr>          </tbody>     </table>     </div>     </td>     </tr>     </tbody>     </table>     <div style="height:15px"></div> </div> </body> </html>

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

上一篇：document.designMode的功能與使用方法介紹

下一篇：javascript(js) join函數使用方法介紹