<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: 1000pxheight: 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>
以上是代码冻结的发放案例。
1、首先新建一个web项目，主要用到了html文件和css文件。
2、然后在html文件中，有图中的代码，引入css文件和设置一个div标签。
3、然后这里是css样式文件，主要看图中红框中内容，使用fixed定位方式。
4、运行项目后，可以看到div在右下角（为了模拟这里的body高度设置很高，足够滚动条下拉到底部的）。
5、然后滑动滚动条，即使到达底部后，div的位置依旧没有修改，就完成了。
excel中同时冻结行和列的方法如下：
工具／原料：Dell游匣G15、win10、Excel2020
1、打开excel软件，点击“视图”，找到“冻结窗口”。
2、选择想要冻结的行，选择好之后点击“冻结首行”，下滑表格的时候冻结部分不会跟随移动。
3、选中要冻结的列，点击右上角的“冻结首列”，左右浏览时冻结的列也不会移动。
4、同时冻结行和列的话，如：选中第四行第三列，点击“冻结拆分窗格”，系统默认选中的单元格以上和以左都进行冻结。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）