A fixed four-byte table is used to scroll up or down the table, while the table is up or down.

A fixed four-byte table is used to scroll up or down the table, while the table is up or down.

Problem:

When I recently made project statistics, I met a specific requirement that the table head and tail should be fixed when the table is scroll up or down. When the table is scroll left or right, the last column in the first column of the table is fixed.

First, it may be clearer:

When the left and right sides scroll, the two columns are fixed and the middle part of the head and tail follows the scroll.

When you scroll up or down, the head and tail are fixed, and the middle part of the first column and the last column follows the scroll.

Ideas:

After thinking for a long time, I found that it would be difficult to simply use a table, and there was a conflict between the two. Finally, I changed my mind to use div layout and table-like design to achieve this effect.

Solution:

1. Overall Layout: it consists of three parts: header, body, and footer. Body fixed height. Scroll up or down. Isn't it easy? haha.

2. header layout: left iner right, left10 % width left floating, container80 % width left floating, and right10 % width left floating. Add a container with the actual data width in the containerColumn-container (relative positioning ).

3. body, footer, and header.

4. control core: generate a (80%) div with the same width as the container, and place the sameColumn-containerDiv with the same actual data width (for example, id = Scroll ). To simulate the left and right scroll bars.

$("#Scroll").scroll(function () {                var scrollLeft = $(this).scrollLeft();                $(".column-container").css({ "left": -scrollLeft + "px" });            });

That is, the simulated scroll bar controlsColumn-containerScroll. In this way, two columns are fixed during left and right scrolling, And the iner of the header and tail rows also scroll.

Conclusion:

Since the code style is too long to be pasted out, I will only talk about the ideas here. Try it.