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/