Column width not displaying correctly

chrismpci

Link to test case: https://phase2.petroleum-containment.com/find-an-installer/
Debugger code (debug.datatables.net): atibej
Error messages shown: No message shown
Description of problem: I'm brand new to jQuery and to DataTables. I followed the documentation as closely as I could and have the table mostly functioning the way I want. However, on some browsers, the width of the table isn't correctly. Upon inspecting the HTML, it appears that all of the columns are being squished into the first "colgroup". I'm using Bricks builder for Wordpress but I think I've set my HTML elements correctly. I've noticed that this only happens in Chrome and Arc (that I've tested). Safari seems to show it accurately.

Here's my JS:

  
$(document).ready( function () {
    $('#installerTable').DataTable( {
      paging: false,
      select: true,
      autowidth: false,
      select: {
        items: 'row',
        selector: 'td:first-child'
      },
      responsive: true,
      columnDefs: [
        {searchable: false, targets: [3, 4]},
        {orderable: false, targets: [3, 4]}
      ],
      stateSave: false,
      "oLanguage": {
             "sSearch": "Search name, company, or state:"
            }
      
    } );
} );
  

allan

I've never seen HTML like that before! The HTML that Bricks is generating there is totally invalid. A div as the first element of a table? And a script inside it?

Furthermore there is no tbody for the table body rows, which DataTables requires.

Fixing those two points should allow it to work as expected.

Allan