Table headers are not aligned with its content.

[nobleboyh]

Description

First, thank you for the great project.

I'm having problem that the table headers are not aligned with its content.
With the same data, this problem sometimes occurs, and it will be disappear with I click to any headers which have the sorting function.
Could you tell me which one I'm doing wrong? Thank you.

By the way, I'm new with this so please let me know if there are anything inappropriate.

Example(s)

Hear is my example:
https://live.bootstrap-table.com/code/nobleboyh/10042

*I'm using lastest Chrome browser.

[wenzhixin]

Can you reproduce the problem? https://live.bootstrap-table.com/code/wenzhixin/10049

[Friends4U]

Problem is there also :)

[ryan-kite]

Love this library too.

Did anyone find a fix for this yet?

I'm seeing this same issue with the table header columns not aligned correctly as well.

This appears to be related to having a 'height' value on the table which causes the table-body to scroll and the headers to become fixed in place and not scroll out of view. Which is the exact UX we are after. With no height value on the table, the columns and headers look normal.

Example:

With table hight value:

No table height value:

Much appreciated.

[nobleboyh]

I found a little trick to temporarily solve the problems.
By setting a delay time after creating table headers, the problems seem disappear but this will cost about 100ms when loading page.
Hope can find better solution.
https://live.bootstrap-table.com/code/nobleboyh/10244

[tvargas1]

As @ryan-kite pointed out that the issue is caused by the virtual scrollbar. The table header has the full width of the tableContainer, while the tableBody is padded by the scrollbar.

To fix this, I overrode the resetView function and added the following to add padding to the tableHeader to account for the scrollbar. If the scrollbar isn't present then headerPadding should be 0.

       let headerPadding = this.$tableContainer.innerWidth() - $bodyTable.innerWidth() 
       this.$tableHeader.css('padding-right', `${headerPadding}px`)

Edited:
Improving on my previous work around, I am now extending bootstrap-table making it more concise.

    $.BootstrapTable = class extends BootstrapTable {
        resetView(params) {
            super.resetView(params);
            
            let $bodyTable = this.$tableBody.find('>table')
            let headerPadding = this.$tableContainer.innerWidth() - $bodyTable.innerWidth() 
            this.$tableHeader.css('padding-right', `${headerPadding}px`)
        }
    }

[ryan-kite]

@tvargas1 where are you adding in that code to fix the issue, I can't seem to get it working as expected.

[tvargas1]

@tvargas1 where are you adding in that code to fix the issue, I can't seem to get it working as expected.

@ryan-kite

Add the following after the bootstrap-table script tag like this:

<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script ...additional bs-table extensions></script>
<script>
    $.BootstrapTable = class extends BootstrapTable {
        resetView(params) {
            super.resetView(params);
            
            let $bodyTable = this.$tableBody.find('>table')
            let headerPadding = this.$tableContainer.innerWidth() - $bodyTable.innerWidth() 
            this.$tableHeader.css('padding-right', `${headerPadding}px`)
        }
    }

$(() => {
  $('#myTable').bootstrapTable()
})
</script>

Because bootstrap table initializes on document ready it should apply to data-toggle="table" as well as programmatically initialized tables. I'm also using additional extensions and have not run into any problems. Hope this helps.

One last thing, if you are using max-width css on any of the columns that can interfere with proper alignment. I ran into this problem coming from a base template. I believe it would need to be applied to both td and th of the column if you are using it, but I haven't tested this.

[ryan-kite]

@tvargas1 - That worked! I did have max-width on one column, but it didn't seem to impact the result. Thank you for the help.

[dougauerbach]

Please be cautious about using the workaround posted by @tvargas1 above. It will break certain other features in bootstrap-table, including the filter-control extension and export button.

[tvargas1]

Please be cautious about using the workaround posted by @tvargas1 above. It will break certain other features in bootstrap-table, including the filter-control extension and export button.

@dougauerbach you are correct. I didn't use these extensions in my original implementation.

It looks like there may have been a fix in 1.20.0 but I haven't checked it out yet. https://github.com/wenzhixin/bootstrap-table/releases/tag/1.20.0

If that doesn't work or you are on an older version this change seem to resolve the issues, but I haven't fully tested it. Basically place the extend right below bootstrap-table js and move super.resetView(params); to the bottom of the function.

<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
<script>
    // fix for misaligned column headers 
    //   https://github.com/wenzhixin/bootstrap-table/issues/6006
    $.BootstrapTable = class extends BootstrapTable {
        resetView(params) {
            
            let $bodyTable = this.$tableBody.find('>table')
            let headerPadding = this.$tableContainer.innerWidth() - $bodyTable.innerWidth() 
            this.$tableHeader.css('padding-right', `${headerPadding}px`)

            super.resetView(params);
        }
    }
</script>
<script src="https://unpkg.com/[email protected]/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>

hope this helps

[UtechtDustin]

Can't reproduce this issue in the latest version.
Does anybody can reproduce it ?
@nobleboyh @Friends4U @tvargas1

[csswl]

Description

First, thank you for the great project.

I'm having problem that the table headers are not aligned with its content. With the same data, this problem sometimes occurs, and it will be disappear with I click to any headers which have the sorting function. Could you tell me which one I'm doing wrong? Thank you.

By the way, I'm new with this so please let me know if there are anything inappropriate.

Example(s)

Hear is my example: https://live.bootstrap-table.com/code/nobleboyh/10042

*I'm using lastest Chrome browser.

I found when using table.height option, if the content has vertical scrollbar, the table header will not align with the table body (content). I found the code here may has problem:

var scrollWidth = this.hasScrollBar && fixedBody.scrollHeight > fixedBody.clientHeight + this.$header.outerHeight() ? Utils.getScrollBarWidth() : 0;
in line 7567?
I removed the this.hasScrollBar, then it's OK.
I understand that the this.hasScrollBar is refer to the horizonal scroll bar, no relation with this scrollWidth

[c-viswanath]

@UtechtDustin I am able to reproduce the same issue , here are the steps I followed to reproduce it:
1.Go to this example Link and keep your screen zoom in the range of 10%-90%.
2.Scroll horizontally till the last.
Here's a screenshot

I was on 75% zoom level.After 90% screen zoom this issue doesn't seem to happen with me.

Can't reproduce this issue in the latest version. Does anybody can reproduce it ? @nobleboyh @Friends4U @tvargas1

[UtechtDustin]

Can't repoduce it @c-viswanath.
Which browser(version) do you use ?

[c-viswanath]

I use Chrome 114.0.5735.199

[davidbarman]

I am having the same issue. Vertical and horizontal scrollbars appear without any particular pattern that I can find. Even for small datasets.

Anyone have any ideas how to resolve this? I am using version 1.22.1
Note: For me I have the issue at 100% zoom in the browser.

[svobtom]

I have observed the issue also in the offical documentation on the page
https://examples.bootstrap-table.com/#extensions/sticky-header.html

Tried in Firefox 115.0.3 (64 bits).

[objecttothis]

Still an issue in 1.23.1. As @svobtom pointed out, it can be observed in the examples on the bootstrap-table website

https://examples.bootstrap-table.com/index.html?bootstrap5#extensions/sticky-header.html

[objecttothis]

Can't repoduce it @c-viswanath. Which browser(version) do you use ?

@UtechtDustin the issue doesn't happen unless you're using Sticky Headers and you've scrolled down with the header off the screen.

[objecttothis]

dup #7090