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

How to implement line breaks in textarea text input area

If you want to wrap the text in the textarea input...

Summary of common Linux distribution mirror source configuration

I have been researching Linux recently and tried ...

Practical method of deleting a row in a MySql table

First, you need to determine which fields or fiel...

How to prohibit vsftpd users from logging in through ssh

Preface vsftp is an easy-to-use and secure ftp se...

MySQL Query Cache and Buffer Pool

1. Caches - Query Cache The following figure is p...

Teach you to implement a simple promise step by step

Table of contents Step 1: Build the framework Ste...

Detailed explanation of the principle of Vue monitoring data

Table of contents 1. Introduction II. Monitoring ...

How to export and import .sql files under Linux command

This article describes how to export and import ....

Detailed explanation of the difference between var, let and const in JavaScript

Table of contents As a global variable Variable H...

Detailed explanation of the process of installing MySQL on Ubuntu 18.04.4

Let's take a look at the process of installin...

MySQL query data by hour, fill in 0 if there is no data

Demand background A statistical interface, the fr...

Front-end state management (Part 2)

Table of contents 1. Redux 1.1. Store (librarian)...

Vue Element front-end application development: Use of API Store View in Vuex

Table of contents Overview 1. Separation of front...