html表格table冻结行和列

2019独角兽企业重金招聘Python工程师标准>>>

转自http://liyinlei.iteye.com/blog/2077714

这种固定行列的方式只适用于IE,并且只适用于数据量较少的情况.数据量很多时是非常耗资源的

<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>

转载于:https://my.oschina.net/shanlilaideyu/blog/729324

html表格table冻结行和列相关推荐

Word控件Spire.Doc 【Table】教程(17)：如何在 C#、VB.NET 中删除 Word 表格中的行和列
Spire.Doc for .NET是一款专门对 Word 文档进行操作的 .NET 类库.在于帮助开发人员无需安装 Microsoft Word情况下,轻松快捷高效地创建.编辑.转换和打印 Micr ...
java冻结行列,poi冻结行和列 - osc_0k23td2u的个人空间 - OSCHINA - 中文开源技术交流社区...
在poi中提供了一个Sheet.createFreezePane()方法用于冻结行和列. @param colSplit Horizonatal position of split. @param r ...
UltraWebGrid 冻结行和列效果以及出现的问题
前台属性 StationaryMargins="Header" 和TableLayout="Fixed" <DisplayLayout AutoGener ...
【NAACL 2021】RCI：在基于 Transformer 的表格问答中行和列语义捕获
1.简介论文地址:https://arxiv.org/pdf/2104.08303.pdf 最近,基于 Transformer 的架构被用于越来越多被应用于Table QA.在本文中,作者提出了两 ...
table的行和列的隐藏和显示
今天偶然发现表格隐藏行和列挺好用的,觉得还不错,下面是隐藏和显示table行.隐藏table列(显示的类同)的js函数,直接调用这些函数就可以实现表格行和列的显示和隐藏. 1.显示行 function ...
php表格制作4行两列的表格,excel表格怎么插行和列？
表格插入行的方法:将鼠标移动行数的编号上,右击选择"插入",再通过输入数值来确定需要添加的行数,回车即可.表格插入列的方法:将鼠标移动列数的编号上,右击选择"插入&quo ...
php添加表格行列,excel表格怎么插行和列？
表格插入行的方法:将鼠标移动行数的编号上,右击选择"插入",再通过输入数值来确定需要添加的行数,回车即可.表格插入列的方法:将鼠标移动列数的编号上,右击选择"插入&quo ...
扩展gridview轻松实现冻结行和列
在实际的项目中,由于项目的需要,数据量比较大,同时显示栏位也比较多,要做gridview里显示完整,并做到用户体验比较好,这就需要冻结表头和关键列.由于用到的地方比较多,我们可以护展一个gridvie ...
excel同时冻结行和列
http://jingyan.baidu.com/article/5225f26b06035ce6fa09080d.html 转载于:https://www.cnblogs.com/boot/p/59 ...

html表格table冻结行和列

html表格table冻结行和列相关推荐

最新文章

热门文章