How to fix the four sides of the table to scroll up, down, left and right

How to fix the four sides of the table to scroll up, down, left and right

question:

When I was doing project statistics recently, I encountered a specific requirement, which required that when the table was scrolled up and down, the head and tail of the table were fixed; when the table was scrolled left and right, the first and last columns of the table were fixed.

It may be clearer if we first show the effect diagram:

When scrolling left and right, the two columns are fixed, and the middle part of the head and tail scrolls along.

When scrolling up and down, the head and tail are fixed, and the middle part of the first and last columns scrolls along.

Ideas:

After thinking for a long time, I found that it is basically difficult to achieve if you just use a table, and there are contradictions when scrolling up and down. Finally, I changed my mind and used div layout and table-like 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 high. Implement up and down scrolling. Isn’t it simple? Haha.

2. Header layout: divided into left container right, left10% width left floating, container80% width left floating, right10% width left floating. Add a column-container (relative positioning) with the actual width of the data inside the container.

3. Body, footer and header.

4. Control core: Generate a div with the same width as the container (80%), and place a div with the same width as the actual data of the column-container (such as id=Scroll) inside it. To simulate left and right scroll bars.

JavaScript CodeCopy content to clipboard
  1. $( "#Scroll" ).scroll( function () {
  2.                  var scrollLeft = $( this ).scrollLeft();
  3. $( ".column-container" ).css({ "left" : -scrollLeft + "px" });
  4. });

That is, the simulated scroll bar controls the scrolling of the column-container in the header body footer. This way, the two columns are fixed when scrolling left and right, and the containers of the first and last rows also scroll.

Conclusion:

Since the code style is too lengthy to post, I will just talk about the ideas here and give it a try.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

Original URL: http://www.cnblogs.com/checccy/p/5601145.html

<<:  Solution to the problem of mysql master-slave switch canal

>>:  Javascript to achieve the drag effect of the login box

Recommend

IIS7~IIS8.5 delete or modify the server protocol header Server

Requirements: Remove HTTP response headers in IIS...

Detailed explanation of the principle and usage of MySQL stored procedures

This article uses examples to explain the princip...

XHTML introductory tutorial: text formatting and special characters

<br />This section introduces how to impleme...

How to build a redis cluster using docker

Table of contents 1. Create a redis docker base i...

A brief analysis of kubernetes controllers and labels

Table of contents 01 Common controllers in k8s RC...

Summary of 10 common HBase operation and maintenance tools

Abstract: HBase comes with many operation and mai...

MySQL daily statistics report fills in 0 if there is no data on that day

1. Problem reproduction: Count the total number o...

MySQL slow query method and example

1. Introduction By enabling the slow query log, M...

Logrotate implements Catalina.out log rotation every two hours

1. Introduction to Logrotate tool Logrotate is a ...

HTML iframe usage summary collection

Detailed Analysis of Iframe Usage <iframe frame...

JavaScript lazy loading detailed explanation

Table of contents Lazy Loading CSS styles: HTML p...

How to configure tomcat server for eclipse and IDEA

tomcat server configuration When everyone is lear...

Use docker to build kong cluster operation

It is very simple to build a kong cluster under t...

Full steps to create a password generator using Node.js

Table of contents 1. Preparation 2. Writing comma...

XHTML Getting Started Tutorial: What is XHTML?

What is HTML? To put it simply: HTML is used to m...