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

所属分类：网络编程 / JavaScript 阅读数： 2006

收藏 0赞 0分享

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>表格头固定而列可滚动的效果-脚本之家</title></head>  <body bgcolor="F6F6F6" style="padding:10 10 10 10"> <div 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 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 class="gridCell_narrow"><input type="checkbox" name="id" value="2" /></div></td>     <td class="odd_even"><div class="gridCell_standard">DJPH001</div></td>     <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>     <td class="odd_even"><div class="gridCell_standard">19</div></td>     <td class="odd_even"><div class="gridCell_standard">直销</div></td>     <td class="odd_even"><div class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div class="gridCell_standard">5</div></td>     <td class="odd_even"><div class="gridCell_standard">12.0000</div></td>     <td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>     <tr class="even">     <td width="30px" class="select-cell">            <div class="gridCell_narrow"><input type="checkbox" name="id" value="3" /></div> </td>     <td class="odd_even"><div class="gridCell_standard">DJPH001</div></td>     <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>     <td class="odd_even"><div class="gridCell_standard">19</div></td>     <td class="odd_even"><div class="gridCell_standard">购销</div></td>     <td class="odd_even"><div class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div class="gridCell_standard">5</div></td>     <td class="odd_even"><div class="gridCell_standard">21.0000</div></td>     <td class="odd_even"><div class="gridCell_standard"> </div></td></tr>     <tr class="odd">     <td width="30px" class="select-cell">           <div class="gridCell_narrow"><input type="checkbox" name="id" value="4" /></div> </td>     <td class="odd_even"><div class="gridCell_standard">DJPH889</div></td>     <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>     <td class="odd_even"><div class="gridCell_standard">0</div></td>     <td class="odd_even"><div class="gridCell_standard">购销</div></td>     <td class="odd_even"><div class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div class="gridCell_standard">5</div></td>     <td class="odd_even"><div class="gridCell_standard">21.0000</div></td>     <td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>     <tr class="even">     <td width="30px" class="select-cell">           <div class="gridCell_narrow"><input type="checkbox" name="id" value="5" /></div> </td>     <td class="odd_even"><div class="gridCell_standard">DJPH889</div></td>     <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>     <td class="odd_even"><div class="gridCell_standard">0</div></td>     <td class="odd_even"><div class="gridCell_standard">直销</div></td>     <td class="odd_even"><div class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div class="gridCell_standard">5</div></td>     <td class="odd_even"><div class="gridCell_standard">1.0000</div></td>     <td class="odd_even"><div class="gridCell_standard"> </div></td></tr>     <tr class="odd">     <td width="30px" class="select-cell">           <div class="gridCell_narrow"><input type="checkbox" name="id" value="6" /></div> </td>     <td class="odd_even"><div class="gridCell_standard">tytutyjh465456</div></td>     <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>     <td class="odd_even"><div class="gridCell_standard">0</div></td>     <td class="odd_even"><div class="gridCell_standard">购销</div></td>     <td class="odd_even"><div class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div class="gridCell_standard">0</div></td>     <td class="odd_even"><div class="gridCell_standard">21.0000</div></td>     <td class="odd_even"><div class="gridCell_standard">生产部已审核</div></td></tr>     <tr class="even">     <td width="30px" class="select-cell">           <div class="gridCell_narrow"><input type="checkbox" name="id" value="7" /></div> </td>     <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>     <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>     <td class="odd_even"><div class="gridCell_standard">-1</div></td>     <td class="odd_even"><div class="gridCell_standard">分销</div></td>     <td class="odd_even"><div class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div class="gridCell_standard">10.2</div></td>     <td class="odd_even"><div class="gridCell_standard">21.0000</div></td>     <td class="odd_even"><div class="gridCell_standard">生产部已审核</div></td></tr>     <tr class="odd">     <td width="30px" class="select-cell">           <div class="gridCell_narrow"><input type="checkbox" name="id" value="8" /></div> </td>     <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>     <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>     <td class="odd_even"><div class="gridCell_standard">-1</div></td>     <td class="odd_even"><div class="gridCell_standard">分销</div></td>     <td class="odd_even"><div class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div class="gridCell_standard">10.2</div></td>     <td class="odd_even"><div class="gridCell_standard">12.0000</div></td>     <td class="odd_even"><div class="gridCell_standard">总代已审核</div></td></tr>     <tr class="even">     <td width="30px" class="select-cell">           <div class="gridCell_narrow"><input type="checkbox" name="id" value="9" /></div> </td>     <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>     <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>     <td class="odd_even"><div class="gridCell_standard">-1</div></td>     <td class="odd_even"><div class="gridCell_standard">分销</div></td>     <td class="odd_even"><div class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div class="gridCell_standard">10.2</div></td>     <td class="odd_even"><div class="gridCell_standard">32.0000</div></td>     <td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>     <tr class="odd">     <td width="30px" class="select-cell">          <div class="gridCell_narrow"><input type="checkbox" name="id" value="10" /></div> </td>     <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>     <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>     <td class="odd_even"><div class="gridCell_standard">-1</div></td>     <td class="odd_even"><div class="gridCell_standard">分销</div></td>     <td class="odd_even"><div class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div class="gridCell_standard">10.2</div></td>     <td class="odd_even"><div class="gridCell_standard">12.0000</div></td>     <td class="odd_even"><div class="gridCell_standard"> </div></td></tr>     <tr class="even">     <td width="30px" class="select-cell">           <div class="gridCell_narrow"><input type="checkbox" name="id" value="11" /></div> </td>     <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>     <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>     <td class="odd_even"><div class="gridCell_standard">-1</div></td>     <td class="odd_even"><div class="gridCell_standard">分销</div></td>     <td class="odd_even"><div class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div class="gridCell_standard">10.2</div></td>     <td class="odd_even"><div class="gridCell_standard">12.0000</div></td>     <td class="odd_even"><div class="gridCell_standard"> </div></td></tr>     <tr class="odd">     <td width="30px" class="select-cell">           <div class="gridCell_narrow"><input type="checkbox" name="id" value="12" /></div> </td>     <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>     <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>     <td class="odd_even"><div class="gridCell_standard">-1</div></td>     <td class="odd_even"><div class="gridCell_standard">分销</div></td>     <td class="odd_even"><div class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div class="gridCell_standard">10.2</div></td>     <td class="odd_even"><div class="gridCell_standard">12.0000</div></td>     <td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>     <tr class="even">     <td width="30px" class="select-cell">           <div class="gridCell_narrow"><input type="checkbox" name="id" value="13" /></div> </td>     <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>     <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>     <td class="odd_even"><div class="gridCell_standard">-1</div></td>     <td class="odd_even"><div class="gridCell_standard">分销</div></td>     <td class="odd_even"><div class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div class="gridCell_standard">10.2</div></td>     <td class="odd_even"><div class="gridCell_standard">12.0000</div></td>     <td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>     <tr class="odd">     <td width="30px" class="select-cell">           <div class="gridCell_narrow"><input type="checkbox" name="id" value="14" /></div> </td>     <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>     <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>     <td class="odd_even"><div class="gridCell_standard">-1</div></td>     <td class="odd_even"><div class="gridCell_standard">分销</div></td>     <td class="odd_even"><div class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div class="gridCell_standard">10.2</div></td>     <td class="odd_even"><div class="gridCell_standard">12.0000</div></td>     <td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>     <tr class="even">     <td width="30px" class="select-cell">           <div class="gridCell_narrow"><input type="checkbox" name="id" value="15" /></div> </td>     <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>     <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>     <td class="odd_even"><div class="gridCell_standard">-1</div></td>     <td class="odd_even"><div class="gridCell_standard">分销</div></td>     <td class="odd_even"><div class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div class="gridCell_standard">10.2</div></td>     <td class="odd_even"><div class="gridCell_standard">21.0000</div></td>     <td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>     <tr class="odd">     <td width="30px" class="select-cell">           <div class="gridCell_narrow"><input type="checkbox" name="id" value="16" /></div> </td>     <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>     <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>     <td class="odd_even"><div class="gridCell_standard">-1</div></td>     <td class="odd_even"><div class="gridCell_standard">分销</div></td>     <td class="odd_even"><div class="gridCell_standard">KIS</div></td>     <td class="odd_even"><div class="gridCell_standard">10.2</div></td>     <td class="odd_even"><div class="gridCell_standard">12.0000</div></td>     <td class="odd_even"><div class="gridCell_standard">已取消</div></td></tr>          </tbody>     </table>     </div>     </td>     </tr>     </tbody>     </table>     <div style="height:15px"></div> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

更多精彩内容其他人还在看

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

纯javascript判断查询日期是否为有效日期

jquery实现的蓝色二级导航条效果代码

ajax如何实现页面局部跳转与结果返回

jQuery实现的类似淘宝网站搜索框样式代码分享

js实现的黑背景灰色二级导航菜单效果代码

jQuery仿360导航页图标拖动排序效果代码分享

javascript中SetInterval与setTimeout的定时器用法

jquery带下拉菜单和焦点图代码分享

jQuery实现的背景动态变化导航菜单效果

jquery+CSS实现的水平布局多级网页菜单效果

网络赚钱

站长故事