Bootstrap-table: The fields in the footer are not aligned with the data columns

[e1xsd]

The fields in the footer are not aligned with the data columns when the grid has the horizontal scroll bar
and the footer column is wider than data column:

and it looks good when the width of the footer column is the same or slighter bigger:

this issue is similar to the : Footer resizing problem #639 => https://github.com/wenzhixin/bootstrap-table/issues/639

http://jsfiddle.net/735aq8d2/

[rvaandrager]

I found the solution for this problem. Summary of what happens:

• The table cells have a width (say: 10px). Bootstrap adds a padding-left of 8px, and a padding-right of 8px. Total inner width in this example: 10px + 16px = 26px.
• The footer is a separate table, with a standard bootstrap table lay-out.
• In version 1.11.1, the footer cells width is determined by taking the JQuery innerWidth() of the parent td. This innerWidth is 26px. This width is set to the
  in the footer.
• The fht-cell div is then placed in a standard bootstrap table td, which adds a padding-left and padding-right of 8px respectively, again. Total width of the footer cell in this example: 26px + 16px = 42px.

Conclusion: every cell in the footer is 16px too wide.

Solution: change this snippet of code (line 2259, function fitFooter):
$footerTd.eq(i).find('.fht-cell').width($this.innerWidth());
to
$footerTd.eq(i).find('.fht-cell').width($this.width());

[lvalladares]

This issue keep happening and the workaround above doesnt work anymore

[rvaandrager]

I tested again in version 1.12.1, my workaround still works. But it only works when there is data in the table.

When there is no data, the footer is not well aligned.

In this example, the cells in the footer should be aligned similarly to the table header cells.

In the same function fitFooter, the following statement seems to be incorrect:

this.$body.find('>tr:first-child:not(.no-records-found) > *').each(function (i) {

The find function is fired on this.$body. But this.$body only contains the table cells, not the header. In this example, there is one table cell, containing "No results found". So, nothing will be selected.

A better solution may be to find all table headers, and copy their respective calculated widths in the footer cells.

[wenzhixin]

Fixed in the latest version.