css让表格第一列和第一行固定

html-css015

css让表格第一列和第一行固定,第1张

给你提供个思路：

第一行为一行多列的表格；

第一列为一列多行的表格；

剩下就是一个表格了。

然后把这些表格都放在一个div里面，并设置其样式

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

以上是代码冻结的发放案例。