Column width not displaying correctly
Column width not displaying correctly
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:"
}
} );
} );
Answers
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 atable
? And ascript
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