<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>完美冻结列和行 </title> <style type="text/css"> .FixedHeaderColumnsTableDiv { overflow: auto; position: relative; } .FixedCell { position: relative; top: expression(this.offsetParent.scrollTop); left: expression(this.parentElement.offsetParent.scrollLeft); z-index: 1800; } .FixedHeaderRow1 { position: relative; top: expression(this.offsetParent.scrollTop); background-color: #ccc; z-index: 300; } .FixedHeaderRow2 { position: relative; top: expression(this.offsetParent.scrollTop); z-index: 290; background-color:#ffccff; } .FixedDataColumn { position: relative; left: expression(this.parentElement.offsetParent.parentElement.scrollLeft); z-index: 200; background-color: Aqua; } </style> </head> <body> <div class="FixedHeaderColumnsTableDiv" style="width: 1000px; height: 100px"> <table border="0" cellpadding="0" cellspacing="0" width="1200px"> <tr class="FixedHeaderRow1"> <td class="FixedCell" style="width: 80px"> header1 </td> <td class="FixedCell" style="width: 80px"> header2 </td> <td class="FixedCell" style="width: 80px"> header3 </td> <td class="FixedCell" style="width: 80px"> header4 </td> <td style="width: 80px"> header5 </td> <td style="width: 80px"> header6 </td> <td style="width: 80px"> header7 </td> <td style="width: 80px"> header8 </td> <td style="width: 80px"> header9 </td> <td style="width: 80px"> header10 </td> </tr> <tr class="FixedHeaderRow2"> <td class="FixedCell" style="width: 80px" align="center"> ss </td> <td class="FixedCell" style="width: 80px" align="center"> ss </td> <td class="FixedCell" style="width: 80px"> header16 </td> <td class="FixedHeaderColumn1" colspan="7" align="center"> header17dddddddddddd </td> </tr> <tr> <td class="FixedDataColumn"> col1 </td> <td class="FixedDataColumn"> col2 </td> <td class="FixedDataColumn"> col3 </td> <td class="FixedDataColumn"> col4 </td> <td> col5 </td> <td> col6 </td> <td> col7 </td> <td> col8 </td> <td> col9 </td> <td> col10 </td> </tr> <tr> <td class="FixedDataColumn"> col1 </td> <td class="FixedDataColumn"> col2 </td> <td class="FixedDataColumn"> col3 </td> <td class="FixedDataColumn"> col4 </td> <td> col5 </td> <td> col6 </td> <td> col7 </td> <td> col8 </td> <td> col9 </td> <td> col10 </td> </tr> <tr> <td class="FixedDataColumn"> col1 </td> <td class="FixedDataColumn"> col2 </td> <td class="FixedDataColumn"> col3 </td> <td class="FixedDataColumn"> col4 </td> <td> col5 </td> <td> col6 </td> <td> col7 </td> <td> col8 </td> <td> col9 </td> <td> col10 </td> </tr> <tr> <td class="FixedDataColumn"> col1 </td> <td class="FixedDataColumn"> col2 </td> <td class="FixedDataColumn"> col3 </td> <td class="FixedDataColumn"> col4 </td> <td> col5 </td> <td> col6 </td> <td> col7 </td> <td> col8 </td> <td> col9 </td> <td> col10 </td> </tr> <tr> <td class="FixedDataColumn"> col1 </td> <td class="FixedDataColumn"> col2 </td> <td class="FixedDataColumn"> col3 </td> <td class="FixedDataColumn"> col4 </td> <td> col5 </td> <td> col6 </td> <td> col7 </td> <td> col8 </td> <td> col9 </td> <td> col10 </td> </tr> <tr> <td class="FixedDataColumn"> col1 </td> <td class="FixedDataColumn"> col2 </td> <td class="FixedDataColumn"> col3 </td> <td class="FixedDataColumn"> col4 </td> <td> col5 </td> <td> col6 </td> <td> col7 </td> <td> col8 </td> <td> col9 </td> <td> col10 </td> </tr> <tr> <td class="FixedDataColumn"> col1 </td> <td class="FixedDataColumn"> col2 </td> <td class="FixedDataColumn"> col3 </td> <td class="FixedDataColumn"> col4 </td> <td> col5 </td> <td> col6 </td> <td> col7 </td> <td> col8 </td> <td> col9 </td> <td> col10 </td> </tr> </table> </div> </body> </html>
以上第一种方式摘自:http://hi.baidu.com/zouyou626/item/b50ece1615bf0b781009b5c6
下面开始第二种方式:
<html> <head> <title>表格行列冻结示例</title> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <style> td { height:30px; width:180px; } </style> </head> <body> <div style="OVERFLOW: scroll;width:100%;height:140px;"> <table id="oFrozenTable" border="1" cellspacing="1" cellpadding="0" bordercolor="#74c6f5" width="900" bgcolor="#ffffff"> <tr> <td nowrap>第一列</td> <td nowrap>第二列</td> <td nowrap>第三列</td> <td nowrap>第四列</td> <td nowrap>第无列</td> <td nowrap>第六列</td> <td nowrap>第七列</td> <td nowrap>第八列</td> </tr> <tr> <td nowrap>第一行</td> <td nowrap>1.1</td> <td nowrap>1.2</td> <td nowrap>1.3</td> <td nowrap>1.4</td> <td nowrap>1.5</td> <td nowrap>1.6</td> <td nowrap>1.7</td> </tr> <tr> <td nowrap>第二行</td> <td nowrap>2.1</td> <td nowrap>2.2</td> <td nowrap>2.3</td> <td nowrap>2.4</td> <td nowrap>2.5</td> <td nowrap>2.6</td> <td nowrap>2.7</td> </tr> <tr> <td nowrap>第三行</td> <td nowrap>3.1</td> <td nowrap>3.2</td> <td nowrap>3.3</td> <td nowrap>3.4</td> <td nowrap>3.5</td> <td nowrap>3.6</td> <td nowrap>3.7</td> </tr> <tr> <td nowrap>第四行</td> <td nowrap>4.1</td> <td nowrap>4.2</td> <td nowrap>4.3</td> <td nowrap>4.4</td> <td nowrap>4.5</td> <td nowrap>4.6</td> <td nowrap>4.7</td> </tr> </table> </div> <script language="javascript" src="frozenTable.js"></script> <script language="javascript"> FrozenTable(oFrozenTable, 1, 1, 1); function FrozenTable(oFrozenTable, iFrozenRowHead, iFrozenRowFoot, iFrozenColLeft) { oFrozenTable.HeadRow = iFrozenRowHead; var oDivMaster = oFrozenTable.parentElement; if(oDivMaster.tagName != 'DIV') return; if((oFrozenTable.offsetHeight > oDivMaster.offsetHeight) && (oFrozenTable.offsetWidth > oDivMaster.offsetWidth)) { //创建并克隆LeftHead表格 if((iFrozenColLeft > 0) && (iFrozenRowHead > 0)) { var oTableLH = document.createElement("TABLE"); var newTBody = document.createElement("TBODY"); oTableLH.insertBefore(newTBody); oTableLH.id = "oTableLH"; oDivMaster.parentElement.insertBefore(oTableLH); CloneTable(oFrozenTable, oTableLH, 0, iFrozenRowHead, iFrozenColLeft) oTableLH.srcTable = oFrozenTable; with(oTableLH.style) { zIndex = 804; position = 'absolute' pixelLeft = oDivMaster.offsetLeft; pixelTop = oDivMaster.offsetTop; } } //创建并克隆LeftFoot表格 if((iFrozenColLeft > 0) && (iFrozenRowFoot > 0)) { var oTableLF = document.createElement("TABLE"); var newTBody = document.createElement("TBODY"); oTableLF.insertBefore(newTBody); oTableLF.id = "oTableLF"; oDivMaster.parentElement.insertBefore(oTableLF); CloneTable(oFrozenTable, oTableLF,oFrozenTable.rows.length - iFrozenRowFoot, oFrozenTable.rows.length, iFrozenColLeft) oTableLF.srcTable = oFrozenTable; with(oTableLF.style) { zIndex = 803; position = 'absolute' pixelLeft = oDivMaster.offsetLeft; pixelTop = oDivMaster.offsetTop + oDivMaster.offsetHeight - oTableLF.offsetHeight - 16; } } } //创建DivHead、创建并克隆HeadTar表格 if((iFrozenRowHead > 0) && (oFrozenTable.offsetHeight > oDivMaster.offsetHeight)) { var DivHead = document.createElement("DIV"); oDivMaster.parentElement.insertBefore(DivHead); var oTableHead = document.createElement("TABLE"); var newTBody = document.createElement("TBODY"); oTableHead.id = "HeadTar"; oTableHead.style.position = "relative" oTableHead.insertBefore(newTBody); DivHead.insertBefore(oTableHead); CloneTable(oFrozenTable, oTableHead, 0, iFrozenRowHead, -1) HeadTar.srcTable = oFrozenTable; with(DivHead.style) { overflow = "hidden"; zIndex = 802; pixelWidth = oDivMaster.offsetWidth - 16 position = 'absolute'; pixelLeft = oDivMaster.offsetLeft; pixelTop = oDivMaster.offsetTop; } } //创建DivFoot、创建并克隆FootTar表格 if((iFrozenRowFoot > 0) && (oFrozenTable.offsetHeight > oDivMaster.offsetHeight)) { var DivFoot = document.createElement("DIV"); oDivMaster.parentElement.insertBefore(DivFoot); var oTableFoot = document.createElement("TABLE"); var newTBody = document.createElement("TBODY"); oTableFoot.insertBefore(newTBody); oTableFoot.id = "FootTar"; oTableFoot.style.position = "relative" DivFoot.insertBefore(oTableFoot); CloneTable(oFrozenTable, oTableFoot, oFrozenTable.rows.length - iFrozenRowFoot, oFrozenTable.rows.length, -1) oTableFoot.srcTable = oFrozenTable; with(DivFoot.style) { overflow = "hidden"; zIndex = 801; pixelWidth = oDivMaster.offsetWidth - 16 position = 'absolute' pixelLeft = oDivMaster.offsetLeft; pixelTop = oDivMaster.offsetTop + oDivMaster.offsetHeight - DivFoot.offsetHeight - 16; } } //创建DivLeft、创建并克隆LeftTar表格 if((iFrozenColLeft > 0) && (oFrozenTable.offsetWidth > oDivMaster.offsetWidth)) { var DivLeft = document.createElement("DIV"); oDivMaster.parentElement.insertBefore(DivLeft); var oTableLeft = document.createElement("TABLE"); var newTBody = document.createElement("TBODY"); oTableLeft.insertBefore(newTBody); oTableLeft.id = "LeftTar"; oTableLeft.style.position = "relative"; DivLeft.insertBefore(oTableLeft); CloneTable(oFrozenTable, oTableLeft, 0, oFrozenTable.rows.length, iFrozenColLeft) LeftTar.srcTable = oFrozenTable; with(DivLeft.style) { overflow = "hidden"; zIndex = 800; pixelWidth = oDivMaster.offsetWidth - 16 pixelHeight = oDivMaster.offsetHeight - 16 position = 'absolute' pixelLeft = oDivMaster.offsetLeft; pixelTop = oDivMaster.offsetTop; } } //为主DIV附加onscroll事件 oDivMaster.attachEvent("onscroll", DivMasterScroll); } //+---------------------------------------------------------------------------- // //功能描述:克隆表格 // //输入参数:oSrcTable 源表格 // oNewTable 新表格 // iRowStart 克隆开始行 // iRowEnd 克隆结束行 // iColumnEnd 克隆结束列 // //----------------------------------------------------------------------------- function CloneTable(oSrcTable, oNewTable, iRowStart, iRowEnd, iColumnEnd) { //循环控制参数 var i, j, k = 0; //新增行、列 var newTR, newTD; //新表格宽度、高度 var iWidth = 0, iHeight = 0; //拷贝Attributes、events and styles oNewTable.mergeAttributes(oSrcTable); //循环克隆指定行 for (i = iRowStart; i < iRowEnd; i++) { newTR = oNewTable.insertRow(k); //拷贝Attributes、events and styles newTR.mergeAttributes(oSrcTable.rows[i]); iHeight += oSrcTable.rows[i].offsetHeight; iWidth = 0; //循环克隆指定列 for(j = 0; j < (iColumnEnd == -1 ? oSrcTable.rows[i].cells.length: iColumnEnd); j++) { newTD = oSrcTable.rows[i].cells[j].cloneNode(true); iWidth += oSrcTable.rows[i].cells[j].offsetWidth; newTR.insertBefore(newTD); newTD.style.pixelWidth = oSrcTable.rows[i].cells[j].offsetWidth; } k++; } oNewTable.style.pixelWidth = iWidth; oNewTable.style.pixelHeight = iHeight; } //+---------------------------------------------------------------------------- // // 功能描述:主DIV的onscroll事件 // // 输入参数:无 // //----------------------------------------------------------------------------- function DivMasterScroll() { var oDivMaster = window.event.srcElement; if(document.getElementById('HeadTar') != null) { document.getElementById('HeadTar').style.pixelLeft = - oDivMaster.scrollLeft; } if(document.getElementById('FootTar') != null) { document.all('FootTar').style.pixelLeft = - oDivMaster.scrollLeft; } if(document.getElementById('LeftTar') != null) { document.all('LeftTar').style.pixelTop = - oDivMaster.scrollTop; } } </script> </body> </html>
这个第二种方式摘自:http://blog.csdn.net/jiacky/article/details/1746976
相关推荐
页面显示表格,表格的首行冻结,首列冻结,最后一行也冻结,实现数据查看和合计查看的效果。DemoDemoDemoDemo
HTML 实现行、列冻结功能,使用了javascript、jquery 的方式实现了类似excel冻结的功能。
html的table滚动时固定首行和首例,网上多为3个table拼合实现,现使用一个table实现
基于jquery的冻结行冻结列插件,可以支持复合表头,对原业务代码侵入较小,非常适合需要实现固定行列对table场景
实用 table + div + Jquery 实现,没有实用IE特有的expression(), 所以 兼容性 很好。...核心思想: 用JQuery的clone 复制 出 4张表, 分别放于 4 个 div 中来实现 水平 垂直 滚动, 首行 首列 冻结效果。
html表格列锁定,能够锁定多列并拖拽,如果锁定的列超出div宽度的话,会取消拖拽效果,只有当需要锁定的列不大于div时显示正常
该文件是基于html+css+javascript集成的轻量型table表格表头冻结滑动,通过js读取html中表格结构然后动态创建div或table来完成层叠拼接工作
自定义表头、多行表头、隔行高亮、冻结行等功能,HTML源码
主要介绍了bootstrap-table实现表头固定以及列固定的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
与多个标题行和colspan一起使用使用:colspan => 1和:rowspan => 2可以使用多个tr和th。 这就是我们需要的自己。 参见example.html.haml #例子打开example.html来检查行为。 html是使用haml example....
在数据表格中,对于按某个分类展示数据其分类下又有多个细分的嵌套细分项,如省市区昵称,省下面有多个市,市下面有多个区,区下面有昵称,需要实现跨行合并,且操作按钮以分类为单位(即操作按钮需按照分类合并)。...
9.9 JavaScript遍历table的行和列 9.10 表格按回车自动生成新行 9.11 单击单元格背景变色 9.12 单击表格某行后其他行隐藏 9.13 单击表头实现表格排序 9.14 单击单元格显示行的详细信息 9.15 表格设置为“100%”时...
9.9 JavaScript遍历table的行和列 9.10 表格按回车自动生成新行 9.11 单击单元格背景变色 9.12 单击表格某行后其他行隐藏 9.13 单击表头实现表格排序 9.14 单击单元格显示行的详细信息 9.15 表格设置为“100%”时...
一个简单的Vue组件,用于过滤和排序表 :police_car_light: 警告:功能冻结 :police_car_light: 由于其构建方式,该软件包的版本1变得很难维护。 我们也有太多功能请求,我们也不能全部满足。 我们正在开发此软件包的...
而“完整”的意思是指在冻结列,冻结行,标题,footer,分页这些功能块都存在时候的DOM结构。 要搞清楚Datagrid的工作原理,这个DOM结构必须要烂熟于胸的,我们直接来看这个“基础完整DOM结构”是什么样子的: <...
EasyReport是一个简单易用的开源Web报表工具(支持Hadoop,HBase及各种关系型数据库),它的主要功能是把SQL语句查询出的行列结构转换成HTML表格(Table),并支持表格的跨行(RowSpan)与跨列(ColSpan)。同时它还支持报表...
可排序-小型的原始JS表排序器使任何具有class =“ ... 庞大的表格会使其变慢,并且可能会冻结浏览器,尤其是对于手机而言,所以您知道... 需要thead和tbody 。 跨浏览器,即9+ 附加到行的eventListeners将被删除