Pfthb

I am using jQuery datatables for a project and I have the following issue:

On first load, the columns of the header and data rows are nicely aligned. However, when the window is resized, the body cells shrink or grow, whereas the header cells remain a constant width. The result is a mis-alignment of the header and body rows.
The following code is used to initialize the datatable:

$el.DataTable(
 paging: true,
 lengthChange: true,
 searching: true,
 ordering: true,
 info: true,
 autoWidth: false,
 pageLength: 25,
 columns: getColumns(configurationObject),
 scrollX: true,
 language: localizationObject,
 data: getDataset(configurationObject),
 dom: 'lrtip',
 lengthMenu: [
 [10, 25, 50, 100, -1],
 [10, 25, 50, 100, localizationObject['allRows']]
 ]
);

And the html is as follows:

<table class="table table-bordered table-striped">
 <thead>
 <tr>
 <th>Code</th>
 <th>Description</th>
 </tr>
 </thead>
</table>

In my quest to solve this issue, I have tried the following:

• Set autoWidth to true/false


• Enable/Disable the responsive plugin

Many answers revolve around the table being constructed before the dom is finished loading, or inside a hidden div preventing widths to be calculated. Neither of those are true for me. The code above gets called in a $(document).ready(function () } and is not hidden when called (as I said, initial load works fine, but I thought it is worth mentioning).

In my investigation, I noticed that, for the header row, an entirely new html table is created. The cells of that row are also given a fixed width. That does explain the misalignment to me, but, I am no closer to actually resolving the issue at hand.

I am trying to achieve either of two scenarios:

• The columns of the body are of fixed width, and horizontal scroll will take over if the table overflows. I have set scrollX to true, and on small screens this works very well.


• The columns of the header row are not of fixed width, but rather the width of the body columns.

Hopefully I have provided enough information for someone to find an answer, because I have googled and looked and I can't find it. If more information is needed, then please let me know.

Thank you in advance.