Fixed table header 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:

Fixed table header in Bootstrap