Why is Datatables now rendering an extra column and breaking the table layout?

MapesTech

Test Case - https://jsfiddle.net/ame59ukd/1/

Issue.
I am using Datatables in a variety of projects but I have hit an issue with a particular table where an additional column is being added without my instructions and this breaking the layout.

I've stripped the data and other columns and have created a JSFiddle example using two columns where the data is set from JSON.

What happens is three columns are rendered for the rows but I do not understand why.

Tested with the latest jQuery, latest Datatabes and against Bootstrap 5.1.3 and 5.2.3.

BS 5.2.3 Test Case - https://jsfiddle.net/ame59ukd/1/
BS 5.1.3 Test Case - https://jsfiddle.net/ame59ukd/2/

In both cases the datatables bundle I'm using comprises of:

Datatables + BS + Buttons + ColViz + HTML5 Export + JSZip + ColReorder + FixedColumns + Responsive + Scroller + SearchBuilder + SearchPanes + Select + StateRestore

I feel like I'm doing something stupid as I've not come across this before despite using datatables for years. Can anyone spot anything obvious?

kthorngren

Your header has invalid HTML:

      <thead>
        <tr>
          <th>First Reference<th>
          <th>Second References</th>
        </tr>
      </thead>

Replace the <th> with </th> at the end of <th>First Reference<th> to fix the problem.
https://jsfiddle.net/cfwmsytb/

Kevin

MapesTech

Ah yes, I knew it was something stupid but would not see it, thank you