html怎么冻结表格的行与列?

html怎么冻结表格的行与列?,第1张

<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: 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、电脑打开Excel,把标题行设置在首行。

2、然后点击视图中的冻结窗格

3、点击冻结窗格后,点击选择冻结首行。

4、点击冻结首行后,标题行就一直在首行,即使下拉也会显示在上面的。

5、然后点击页面布局中的打印标题。

6、在顶端标题行中选择要每页都显示的标题。

7、选择顶端标题后,进入打印模式,就可以看到每一页都要一个表头了。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/7124308.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-01
下一篇 2023-04-01

发表评论

登录后才能评论

评论列表(0条)

保存