Ask the "table fixed multi-layer Header" question!

These two days I have been busy with the implementation of fixed multi-layer table headers. I have not solved a problem in the implementation process for a long time. Now I have posted the problem, if any bloggers know the solution, please give me some advice. Thank you!

　　The following figure shows the pre-fix of multiple headers:

　　After adding a style to fix multiple headers, the headers are not aligned and the displayed data is blocked, as shown in the following figure:

The following describes the implementation steps: (the red font is a problem for me)

A fixed position is required on the header. First, a container is required. If you do not use a container, the browser itself is a container. to display the scroll bar, the container must use CSS overflow: in this way, the scroll bar can be automatically displayed. Don't forget that the DIV will automatically increase the height, so the first constraint is:

To use a table with a fixed header, the height of the table (external container) must be set.

We fill in the data in the table, and the following data is not displayed, only the Header is displayed.

<Style>
Div. c {overflow: auto; width: 600px; height: 200px; border: solid 2px red ;}
Table. t thead td {background-color: # ccc; font-weight: bold ;}
</Style>
<Div class = "c">
<Table border = "1" class = "t">
<Thead>
<Tr> <td> COL01 </td> <td> COL02 </td> <td> COL03 </td> .... </Tr>
</Thead>
<Tbody> <tr> ..... </Tr> </tbody>
</Table>
</Div>

The result is as follows:

 

To set a fixed header, perform the following steps:

1. Set the TR position of the table header to the relative position so that the TR position of the table header can be located at the top of the table container.
2. Set the position TOP attribute of the TR header to the position of the dynamically obtained container.

The attributes of TR are modified as follows:

Table. t thead tr {position: relative; top: expression (this. offsetParent. scrollTop );}

This CSS makes the header vertically fixed.

We try to add multiple rows in THEAD, and there is no problem. Next we will test the cross-row cross-column problem of the header. We will add three rows and add a cross-row

 

The problem is displayed at this time.

 

One line of code to handle this stuff

Table. t thead td {background-color: # ccc; font-weight: bold; Position: relative;}

We have added more cross-row and cross-column tests.

 

The problem is that we set ROWSPAN = 2 on COL4.

 

An error occurred.

 

This problem occurs when ROWSPAN is set on the last cell displayed on the column. No solution found, depressing. Please help me solve it. thank you first.

Next I will try to set a fixed column position. I can simply write CSS. Let's figure it out.

Table. t thead td. fix {position: relative; left: expression (this. parentElement. offsetParent. scrollLeft );}
Table. t tbody td. fix {position: relative; left: expression (this. parentElement. offsetParent. parentElement. scrollLeft );}

 

The effect is as follows:

 

Oh, it's messy, isn't it? The reason is the problem of the background and Zindex. After the modification, CSS is

 

What's more unsatisfactory is that the blank area is transparent. How can this problem be solved? Modify CSS

 

The complete CSS is as follows:

<Style>
Div. c {background-color: white; display: inline; overflow: auto; width: 600px; height: 200px; border: solid 2px red ;}
Table. t thead td {background-color: # ccc; font-weight: bold; position: relative ;}
Table. t tbody td {background-color: white ;}
Table. t thead tr {z-index: 100; position: relative; top: expression (this. offsetParent. scrollTop-2 );}
Table. t thead td. fix {z-index: 200; background-color: red; position: relative; left: expression (this. parentElement. offsetParent. scrollLeft-2 );}
Table. t tbody td. fix {z-index: 50; background-color: red; position: relative; left: expression (this. parentElement. offsetParent. parentElement. scrollLeft-2 );}
</Style>

The complete table script is as follows:

<Div class = "c">
<Table border = "1" class = "t" cellSpacing = 0 cellPadding = 2 border = 0>
<Thead>
<Tr> <td class = "fix"> COL01_1 </td> <td rowspan = "3"> COL02 </td> <td rowSpan = "2"> COL03 </ td> <td colspan = "2"> COL04 </td> ......... </tr>
<Tr> <td class = "fix"> COL01_2 </td> <td> COL04 </td> <td> COL05 </td> ......... </tr>
<Tr> <td class = "fix"> COL01_3 </td> <td> COL03 </td> <td> COL04 </td> <td> COL05 </td> ......... </tr>
</Thead>
<Tbody>
<Tr> <td class = "fix"> ROW01 </td> ...... </tr>
<Tr> <td class = "fix"> ROW02 </td> ...... </tr>
<Tr> <td class = "fix"> ROW03 </td> ...... </tr>
<Tr> <td class = "fix"> ROW04 </td> ...... </tr>
</Tbody>
</Table>
</Div>

Information Source: http://www.loveayang.com.cn/post/2008/04/e59bbae5ae9ae8a1a8e5a4b4e79a84CSSe5ae9ee78eb0.aspx