Header and body Alignment problem.

prashantm

Hi
I am having multiple datatable (only one table is visible at a time) on a html page. first instance of datatable works fine but others are having column alignment issue. Headers are not aligned with table body. Please see attached image for the issue. I appreciate any help to resolve this issue.

gyrocode

CAUSE

Most likely your other tables are initially hidden. For example, your other tables could be in inactive tab, accordion or modal. If a table is hidden when initialized the height / width of the table elements will be unavailable.

SOLUTION

In most cases you need to call columns.adjust() method when table becomes visible to recalculate column widths.

$($.fn.dataTable.tables(true)).DataTable()
   .columns.adjust();

DEMO

See jQuery DataTables: Column width issues with Bootstrap tabs for more details and examples.

---

See more articles about jQuery DataTables on gyrocode.com.