Bootstrap table usage experiences --- thead and td cannot be aligned, bootstrap --- thead

Bootstrap table usage experiences --- thead and td cannot be aligned, bootstrap --- thead

When you use a toolbar to display or hide columns, the table's column header and content are often not aligned.

Two methods are found on the Internet:

1. Remove the height in option to ensure perfect alignment. However, when there is a large amount of data, the table will automatically increase the height to display all data without displaying the scroll bar.

2. comment out the following two lines:

//this.resetHeader();//padding += this.$header.outerHeight();

Perfect alignment, but the header cannot be frozen.

 

Both of these results are not both available for both the fish and the bear's paw, and the affected functions are also very desirable.

The cause of the problem is that the width of the remaining columns is set during the column reduction process, but it is calculated when the remaining width is to be filled after the column is reduced.

 

Finally, I used the following method for your reference:

Do not set the width of one column to make it automatically filled. The following code:

<Thead> <tr> <th data-field = "Code" data-width = "105px"> NO. </th> <th data-field = "Name" data-switchable = "false"> name </th> <th data-field = "Sex" data-width = "120px"> gender </th> <th data-field = "Age "data-width =" 120px "> age </th> <th data-field =" School "data-width =" 30px "> School </th> </tr> </thead>

In this way, if the name is not removed, the non-uniformity will not occur when other columns are removed. To prevent this column from being removed, add data-switchable = "false"

In normal business, columns requiring auto-fill width are also frequently used. This is a good solution.