Details about locking the horizontal and vertical headers of a single table on the webpage

5. Previously, I made an HTML table that could lock the horizontal and vertical headers, but on that day I rushed home and gave only one demo. This is not a long holiday and it is very busy, so it will be delayed until the weekend. Although this is not a novelty, there are still a lot of details in it, so you are welcome to discuss it together.

There are actually many ways to implement the effect of locking the table header, but you can useSingle TableThe expression keyword supported by CSS of IE. In addition, I understand the principles of browser layout. If you are not familiar with it, refer to the two articles I wrote earlier. To achieve this effect, we only need to do two things: one is to use the expression function provided by CSS, and the other is to use the position modification layout method provided by CSS.

First, let's look at the locking of the upper header. We know that for the container element, if you want to limit the size of the internal content and the scroll bar appears. The following CSS is used to define elements that can be used as containers. Here, div is used as a table container,CodeAs follows:

< Div Onselectstart = "Return false" Style = "Border-color: Blue; border-width: 2px; border-style: solid; Height: 100%; width: 700px; overflow: auto; cursor: default ;" >
<! -- Table -->
</ Div >

// What is important is the overflow: auto. By the way, the CSS settings of the scroll bar are very easy, but I don't know how IE works. This container can only set the percentage on the height, and the width must beFixed valueNo, the scroll bar cannot appear in the width direction.

In fact, if we put the table into the DIV, it is already a table that can be rolled, but all cells are also rolling. Therefore, we need to modify the layout of cells that do not want to scroll in the table. The default layout of TR and TD is static. If you want to make tr do not move relative to Div, when the scroll bar in the DIV rolls to scrolltop 100, the relatively unchanged tr should stay at the position (0,100) relative to the upper left corner of the div. We can use <tr style = "position: relative"> to obtain the relativity. How can we get the top 100? Obviously, this is expression. We need to set the CSS on the row to <tr style = "Top: expression (Table container. scrolltop)">. What is this table container? That is, Div. You can use the DOM level to find out because it is:

This . Parentelement. scrolltop;

However, offsetparent can be used for optimization to reduce the reference depth and simplify it:

This . Offsetparent. scrolltop;

The complete css of the locked row is as follows:

< Tr Style = "Position: relative; top: expression (this. offsetparent. scrolltop );" > </ Tr >

So easy? This is simple, but of course there are still problems. There are two main problems with the locking effect: first, the table background is transparent by default, so if it is really rolled up, the words will not move, but they will all overlap with the Hollow. The solution is simple, that is, set the background color for tr. The second problem is depressing. It took a long time to solve it with the help of others. When the position of TR is relative, the border attribute of TD in the tr seems to be invalid, that is, no matter what color is set, the result cannot be displayed:

With the help of putee, we found that we had to set the position attribute of each TD in tr to relative for border to display!

After the above header is completed, let's start with the header on the left. The principle on the left is the same as above, but the element controlled by expression is TD rather than tr. The code that references DIV in expression is as follows:

This . Parentelement. scrolltop;

There is one more level of reference than locking tr. This is different from using offsetparent for optimization and Tr. The offsetparent of TR is the container Div, while the offsetparent of TD is TD, dizzy! Therefore, use this. parentelement to obtain offsetparent. However, the obtained table is dizzy again. Therefore, this optimization can only reduce the number of references at the parent level. The optimization is as follows:

This . Parentelement. offsetparent. parentelement. scrolltop;

The complete css of the locked column is as follows:

< TD Style = "Position: relative; left: expression (this. parentelement. offsetparent. parentelement. scrolltop );" > </ Tr >

After the head is locked in both vertical and horizontal directions, we can find that the borders of the cells in the head are not too large. How can they be double edges? I have set table-collapse to collapse, and the border of the cell is set to solid 1px blue. The result shows that this is another problem after position is set to relative. The solution is to set only two border edges for each header cell, such as top, left, right, and bottom. It is the effect of setting two different border styles for the header cells:

The last part is the rest part in the upper left corner of the grid relative to the container Div. Of course, the TR and TD parts must contain the CSS expressions of the locking row header and the list header at the same time, another problem is that the zindex of the cells in this section must be the largest of the two table headers to ensure that this part is always displayed regardless of the actual Rolling Table header. In addition, due to IE problems, we cannot merge the section in the upper left corner into a TD through colspan and rowspan. If the section is merged, the rows except the first row will be merged, will be overwritten when the header is rolled. Therefore, each row in this part is still a separate TD, but the merge optimization is performed in the horizontal direction.

BTW: because Firefox does not support TD's position as relative, there is no need to discuss the support for Firefox.