jQuery 3.7.1 dataTables 2.3.5 boostrap 3
Trying to get a dataTable initially hidden on a boostrap tab to 1) center horizontally on the tab and 2) fix the widths of the columns. dataTables 2.3.5 is quite new and many of the answers and suggestions use outdated syntax.
This demonstrates the partially-solved problems - notice the table itself is centered and smaller but the column headers are still 100% width-of-page.
xedni.html
var obj_list = [{ 'startTime':'2025-11-30T14:00:00', 'nameOfBand':'Rock Addix', 'nameOfBar':'Eldorado'}
,{ 'startTime':'2025-12-05T20:00:00', 'nameOfBand':'Turn It Up', 'nameOfBar':'On The Green'}
,{ 'startTime':'2025-12-05T20:00:00', 'nameOfBand':'Ground Pounders', 'nameOfBar':'Shout House'}
,{ 'startTime':'2025-12-05T20:00:00', 'nameOfBand':'Rock Addix', 'nameOfBar':'Eldorado'}
,{ 'startTime':'2025-12-05T20:00:00', 'nameOfBand':'Stilettos', 'nameOfBar':'What The Hell'}
,{ 'startTime':'2025-12-06T20:00:00', 'nameOfBand':'Ground Pounders', 'nameOfBar':'On The Green'}
,{ 'startTime':'2025-12-06T20:00:00', 'nameOfBand':'Rock Addix', 'nameOfBar':'Shout House'}
,{ 'startTime':'2025-12-06T20:00:00', 'nameOfBand':'Stilettos', 'nameOfBar':'Eldorado'}
,{ 'startTime':'2025-12-06T20:00:00', 'nameOfBand':'Turn It Up', 'nameOfBar':'What The Hell'}
,{ 'startTime':'2025-12-12T20:00:00', 'nameOfBand':'Rock Addix', 'nameOfBar':'On The Green'}
,{ 'startTime':'2025-12-12T20:00:00', 'nameOfBand':'Stilettos', 'nameOfBar':'Shout House'}
,{ 'startTime':'2025-12-12T20:00:00', 'nameOfBand':'Turn It Up', 'nameOfBar':'Eldorado'}
,{ 'startTime':'2025-12-12T20:00:00', 'nameOfBand':'Ground Pounders', 'nameOfBar':'What The Hell'}
,{ 'startTime':'2025-12-13T20:00:00', 'nameOfBand':'Stilettos', 'nameOfBar':'On The Green'}
,{ 'startTime':'2025-12-13T20:00:00', 'nameOfBand':'Turn It Up', 'nameOfBar':'Shout House'}
,{ 'startTime':'2025-12-13T20:00:00', 'nameOfBand':'Ground Pounders', 'nameOfBar':'Eldorado'}
,{ 'startTime':'2025-12-13T20:00:00', 'nameOfBand':'Rock Addix', 'nameOfBar':'What The Hell'}];
new DataTable('#event_table', {
data: obj_list,
columnDefs: [{width: '100px', targets:[0]}
,{width: '150px', targets:[1,2]}
],
columns: [ { title: 'startTime', data: 'startTime'}
,{ title: 'nameOfBand', data: 'nameOfBand'}
,{ title: 'nameOfBar', data: 'nameOfBar'}
],
autoWidth: false,
scrollY : true,
paging : false,
pageLength :10,
ordering :true,
order:[0,"asc"],
select : { 'style':'single'}
});
// call this after table becomes visible - needed if table is initually hidden like on a bootstrap tab, which in the real webapp it is
//ble.columns.adjust().draw()div.datatable-wrapper {
margin: 0 auto;
}
table.dataTable {
table-layout: fixed;
width: 70%;
}<!DOCTYPE html lang="en">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/2.3.5/js/dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.3.5/css/dataTables.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="datatable-wrapper">
<table id="event_table" class="display">
<thead>
<tr>
<th>startTime</th>
<th>nameOfBand</th>
<th>nameOfBar</th>
</tr>
</thead>
</table>
</div>
</body>
</html>Result of running code snippit? - Looks great in the snippit . Executing xedni.html in my browser shows the behavior described previously. Here is a: screenshot 
What am I doing wrong/not doing right? TIA,
bootstrap-toggle.min.cssis wrong, and the CSS style fortable.dataTablelacks a closing brace. Consider inserting a runnable snippet in your post (using the toolbar button in the editor), so we can see the effect you are describing.