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

Source: Internet
Author: User

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


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.


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.


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.


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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.