Search code examples
jqueryhtmltwitter-bootstrapbootstrap-table

bootstrap-table: table structure breaks when hiding colspan columns

I'm trying to enable column visibility control on my html table using the bootstrap-table plugin. I'm running into issues when I use a multi-row header. That is, when I attempt to hide a column, the cell(s) in the header rows above the lowest row aren't being hidden as they're supposed to, which breaks the table structure. Try hiding a column in the following example: http://jsfiddle.net/ovg67xu4/

Another example here: http://jsfiddle.net/fp2eLkLh/2/

Here is a working example of what I'm looking for using the datatables plugin: https://jsfiddle.net/uL34xLq0/4/

(You can see the issue if you drop the column labeled "1" or "2" or both in each example).

Any idea how I can fix this? Or is columns visibility control with multi-row headers not supported in this plugin?

EDIT: Responding to comment asking if data-visible attribute solves the problem. It does not and further demonstrates the problem: http://jsfiddle.net/qy503gwq/1/

Solution

  • Problem has been recognized and will be fixed in the next release (1.12.0): https://github.com/wenzhixin/bootstrap-table/issues/3213