Home > Developer > Web Develop
Fixed table headers in bootstrap and fixed table in bootstrap
A simple mobile website that has been drummed up at the front end. Today, I want to get it done again.
Because it is mainly for mobile phone access and uses the bootstrap responsive layout, today's task is to make a data display page
However, due to the large number of data columns, the data cannot be displayed horizontally. For better display, the table is wrapped in a. table-responsive element.
In a small viewport, you can slide to view the entire data, so as to ensure the overall page coordination.
As we have just said, there are many data columns and the first column is the owner of the subsequent data, so when the observer looks at the data, the problem arises.
If you slide to the back, it is very inconvenient to forget the owner of this article! For example, when we watch the NBA game data, there are many statistics (that is, many columns)
The name is displayed in the first column. As we move backwards, the following result is displayed:
In this way, we do not know who the data corresponds! Ah ~ What should we do?
The general method is to fix the "owner" column and slide only the column behind it.
However, previously this function was encapsulated in the front-end framework, for example, frozen columns in easyUI, but it was never used in bootstrap (it did not provide this)
Write one by yourself ~ There is no idea, and I finally come up with a "non-mainstream" method: using two tables
The table on the left is used to display fixed information, while the table on the right is used to slide the data.
The implementation is relatively simple. There are several key points:
1. Use float: left to arrange two tables on one row. However, the sum of width between the two tables cannot exceed the total width.
2. Pay attention to the alignment of the two table cells.
The final implementation result is as follows:
You can add a priority keyword.
Table {width: 850px! Important ;}
In html, how does one fix the table's header and table, and drag the data in the middle of the scroll bar to scroll, while the header and table tail are fixed? The end of the table is used for aggregation.
I will give you an example of a fixed table header. The fixed table end is a classroom exercise. I hope you can draw the following lines:
<HTML>
<HEAD>
<TITLE> JS Example </TITLE>
<Style type = 'text/css '>
Tr. locktop {
Position: relative;
Top: expression (this. offsetParent. scrollTop> this. parentElement. parentElement. offsetTop? This. offsetParent. scrollTop-this.parentElement.parentElement.offsetTop-1: 0)-1 );
}
</Style>
</HEAD>
<BODY>
Content in front of the header, which can be rolled out of the screen, only the header is locked.
<Table id = pol_table_list cellspacing = 0>
<Tr class = locktop> <th> Header
<Tr> <td> 1
<Tr> <td> 2
<Tr> <td> 3
<Tr> <td> 4
<Tr> <td> 5
<Tr> <td> 6
<Tr> <td> 7
<Tr> <td> 8
<Tr> <td> 9
<Tr> <td> 10
</Table>
</BODY>
</HTML>
The browser window can be adjusted very small to see the effect. When scrolling down, the header is fixed.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
