Achieve the effect of freezing the top bar of the table, and freezing the top bar of the table

Source: Internet
Author: User

Achieve the effect of freezing the top bar of the table, and freezing the top bar of the table

The company encountered a small demand last night to achieve the effect of freezing the top bar like a table. The specific description is the effect of the dynamic diagram below.

This effect is not very difficult, but it is really troublesome to implement it. The difficulty here is not much to say, that is, the effect gets a little more at once, finally, I found the answer on a frequently visited website.

Original problem address: https://segmentfault.com/q/1010000000130774

Here we will introduce the usage of this small plug-in. First, download the code from github, the famous "Same-Sex" website. Decompress the package as follows:

It is mainly used in my red box. You can also view people's source code. Here, you only need to reference js, and then add the following two classes in the table and thead labels:

Then add the following JavaScript code:

In the red box. Then the results are displayed.

However, some people may have no effect. Don't panic. Press F12 to check the error message. size does not define this method. In this case, you can replace this js file:

Then we can achieve the effect! Some people may feel bored. You are full of pictures. I don't want to copy them directly, but I think there is a gap between reading a lot of things and writing them myself, I hope you can write it for a moment, but I thought that I did not want to open my eyes last night. How can I try to write it again, so I can use my image to make a copy:

Class = "table-fixed-header" in table"
Class = 'header' in thead'

Js: $ ('. table-fixed-header'). fixedHeader ();

Well, it's over now. The first time I wrote a blog, the writing was not good. If you have any questions, please talk to me and make common progress.

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.