Recently, when I was doing project statistics, I encountered a specific requirement, requiring that the table be fixed when scrolling up and down; when scrolling left and right, the table is fixed in the first column of the table, the last column of the first column of the table is fixed.
It may be more clear to put the renderings first:
When scrolling left and right, the two columns are fixed, and the middle part of the head and tail scrolls accordingly.
When scrolling up and down, the head and tail are fixed, and the middle part of the first and last columns scrolls accordingly.
Ideas:After thinking for a long time, I found that it is basically difficult to achieve if I simply use a table, and there are conflicting places when scrolling up and down. Finally, I changed my mind to use div layout and imitate table design to achieve this effect.
solve: 1. Overall layout: It is divided into three parts: upper, middle and lower, namely header, body, and footer. Body is solid. Implement up and down scrolling. Isn't it very simple? Haha. 2. Header layout: divided into left container right, left10% width floats left, container 80% width floats left, right10% width floats left. Add a container with the actual width of data column-container (relative positioning).3. Body, footer and header.
4. Control core: Generate a (80%) div with the same width as the container, and place a div with the same actual data width as the column-container (such as id=Scroll). To simulate left and right scroll bars.
JavaScript Code Copy content to clipboard