表格头固定而列可滚动的效果
发布时间：2020-08-11 21:28:41
标签：表格,可滚动,效果
对于经常需要表格头部不东，而列表可以滚动，多用于数据比较多的情况，方便查看
<!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 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>
0
投稿猜你喜欢
- 最近在无忧脚本混了一阵子，回复了一些贴子，自己却没有做出什么东东让大家看看，心里有些不安，于是写了下边的一点东西，本来应该发在类封装区的，考
- 今天编ZBlog上传模块的时候，需要用到一个提取文章中文件名的子程，开始我把问题想复杂了，匹配了所有可能的文件名，不仅正则表达
1、argparse是一个python模块，用途是：命令行选项、参数和子命令的解释。2、使用步骤：导入argparse模块，并创建解释器添加- 网页制作中是免不了与表格打交道的。表格是网页制作的基础，在网页布局中起着举足轻重的作用，熟练掌握表格的操作，是你制作网页的辅路石，也是你成为
- 本文通过实例解析了 SQL Server 数据库扩展存储过程，实现远程备份与恢复的方法和步骤实例说明： 环境：win2k+sqlserver
- IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内
- 今天有个服务器速度变得非常慢，用工具一看，IIS堵塞进程达到100多个，肯定有问题，下面进入排查（聚友习惯把过程写出来，如果不需要过程，请直
- 首先要作出决策，你是否想要使用最新的开发版本或最终的稳定版本。在MySQL开发过程中，同时存在多个发布系列，每个发布处在成熟度的不同阶段：&
- 1. 二维数据曲线图1.1 绘制二维曲线的基本函数1．plot()函数 plot函数用于绘制二维平面上的线性坐标曲线图，要提供一组x坐标和对
- 众所周知，FileSystemObject（fso）组件的强大功能及破坏性是它屡屡被免费主页提供商(那些支持ASP)的禁用的原因，我整理了一
- 网页设计遇到最大的麻烦之一莫过于网页对不同浏览器的兼容性问题了，因为IE 6.0 / IE 7.0 / firefox 2 / Opera
- Usuage: go run kNN.go --file="data.txt"关键是向量点的选择和阈值的判定
- 字体大小CSS2规范根据长度——水平和垂直尺寸——来定义字体。这个长度为一个数值，前面可能带一个可选的加(+)或减(-)标记符。另外，该数值
- 多个字段模糊查询， 括号中的下划线是双下划线，双下划线前是字段名，双下划线后可以是icontains或contains,区别是是否大小写敏感
- aspjpeg组件实现加水印函数的调用方法： <％printwater "/images/水印图片.gif",&q
- 从业这几年，自己写过的和帮人参谋的所谓“设计规范”不少了，这个东西大概在中国的决策层眼里是这么回事儿 - 一帮农民在一块田里种粮食，起先天气
- #!/usr/local/bin/php -q author:freemouse <?php // 下面是说明. print (&qu
- matplotlibmatplotlib是最流行的python底层绘图库，接下来就由小编为大家介绍一些关于matplotlib的一些基本图形
- 蓝色混迹多年，偷师学艺不少，这次花了2天时间写了点东西发出来送给需要的吧。先放个图片，我改下代码。 重构完成 IE 6
- 前言Iframe 是一种将网页嵌入到另一个页面的内容中的方法。这是通过使用 HTML 元素、外部网站的 URL 以及窗口在您的网站上的外观参
