What should I do if thead and td cannot be aligned?

When using the show/hide column in the toolbar, there is often a problem that the column headers of the table cannot be aligned with the content.

I found two processing methods on the Internet, as follows:

1. Remove the height in the option and achieve perfect alignment, but when there is a lot of data , the table will automatically increase the height and display all data without displaying scroll bars.

2. Comment out the following two lines

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

It will be perfectly aligned, but it will make it impossible to freeze the header.

Both of these results cannot have your cake and eat it too, and the affected functions are also very desirable.

The suspected cause of the problem should be that during the column reduction process, the width of the remaining columns is set, but there is a calculation problem when the remaining width is filled after the columns are reduced.

Finally I adopted the following method for your reference:

Do not set the width of one of the columns to make it Automatic filling, the following code

        <thead><tr><th data-field="Code" data-width="105px">编号</th><th data-field="Name" data-switchable="false">姓名</th><th data-field="Sex" data-width="120px">性别</th><th data-field="Age" data-width="120px">年龄</th><th data-field="School" data-width="30px">学校</th></tr></thead>

In this way, as long as the name is not removed, there will be no alignment problem when removing other columns. In order to prevent this column from being removed, add data-switchable="false"

In normal business, there are often columns that require automatic filling of width, which is a better solution.

The above is the detailed content of What should I do if thead and td cannot be aligned?. For more information, please follow other related articles on the PHP Chinese website!