What should I do if the fixed Bootstrap-table header causes misalignment? How to completely solve it?

Bootstrap-What should I do if the table header is fixed and misaligned? How to deal with it? The following article will introduce to you how to completely solve the problem of Bootstrap-table header misalignment. I hope it will be helpful to you!

Encountering problems

Although the front-end is now dominated by the three major VAR frameworks, there are still many projects that use JQuery Bootstrap. . For example, the framework I am currently responsible for...

The situation is like this. The product wants to achieve the effect of scrolling down the page and fixing the table header when it reaches the top. When I saw this requirement, my mood at the time was: Oh, so easy! ^_^Y

But when I actually realized the fixed meter header, I discovered that the meter header was actually crooked? !

[Related recommendation: "bootstrap tutorial"]

Google

How to fix the table Bootstrap-table head?

 $('#table').bootstrapTable('destroy').bootstrapTable({
    columns: columns,
    data: data,
    pagination: true,
    pageSize: 25,
    pageNumber: 1, //初始化加载第一页，默认第一页
    pageSize: 25, //每页的记录行数（*）
    pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
    fixedColumns: false, // 固定列
    fixedNumber: 0, //固定列数
    height: 800, // <-----固定表头------
});

How to solve the misalignment problem caused by fixing the header? Reference article: https://www.wj0511.com/site/detail.html?id=290

The article points out that $('#table').resize();和.fht-cell {width: 100px !important;}’s solution; actually trying it can only partially solve the problem; The table header does not exceed the overall border, but the table header and the columns below are offset as a whole.

<script>
$(function(){
  $(&#39;#table&#39;).bootstrapTable();
  $(window).resize(function () {
      $(&#39;#table&#39;).bootstrapTable(&#39;resetView&#39;);
  });
})
</script>

By inspecting the elements, we found that the width-controlling element in the header

The width is set to 122 but the width of my data is only 100. This That caused the misalignment. Therefore, you can directly set the class to the width of fht-cell to achieve alignment.

.fht-cell{width:120px!important;}

Analysis plan

• The $('#table').resize();actually makes the table When the window changes, the size is also recalculated for adaptation;

• .fht-cell {width: 100px !important;} is actually Directly specifying the header width achieves the purpose of controlling the total width.

But the above two solutions are not enough to solve the problem I encountered: the overall offset of the table header and table body.

Determine the plan

I accidentally discovered a css property: table-layout:fixed;

Definition and usage

tableLayout attribute is used to display algorithm rules for table cells, rows, and columns.

So

table {
  table-layout: fixed;
}

Final plan$('#table').resize(); table-layout :fixed;

Effect display

Summary

This solution basically realizes the use of The table header and columns are aligned, and the content does not exceed the overall div; But the fly in the ointment is that you can't customize the width of each column. In fact, I set it, but it didn't work. If this is solved, then this solution will be perfect.

For more knowledge about bootstrap, please visit: bootstrap basic tutorial! !

The above is the detailed content of What should I do if the fixed Bootstrap-table header causes misalignment? How to completely solve it?. For more information, please follow other related articles on the PHP Chinese website!