I am using datatables.net
library and in the docs there is an example of using colspan
for headers. But it is throwing an error and I can't seem to find what the issue is
Docs: https://datatables.net/examples/basic_init/complex_header.html
Uncaught TypeError: Cannot read properties of undefined (reading 'style')
at _fnCalculateColumnWidths (jquery.dataTables.js:3965:20)
at _fnInitialise (jquery.dataTables.js:3095:4)
at HTMLTableElement.<anonymous> (jquery.dataTables.js:6301:5)
at Function.each (jquery-1.9.1.js:648:23)
at init.each (jquery-1.9.1.js:270:17)
at init.DataTable [as dataTable] (jquery.dataTables.js:5838:8)
at init.$.fn.DataTable (jquery.dataTables.js:14206:18)
at ?editor_console=true:132:25
HTML code:
<table id="table" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th colspan="2" class="center">Job & Salary</th>
<th>Contact</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>$320,800</td>
<td>Edinburgh</td>
</tr>
</tbody>
</table>
Javascript code:
var table = $('#table').DataTable();
Here is also a JSFiddle example: https://jsfiddle.net/vf5sk76L/