Центрирование таблицы данных jQuery шириной> 100% со столбцами фиксированной ширины ⇐ Jquery

[Anonymous]

jQuery 3.7.1 dataTables 2.3.5 boostrap 3
Попытка получить dataTable, изначально скрытую на вкладке boostrap, чтобы 1) центрировать ее по горизонтали на вкладке и 2) зафиксировать ширину столбцов. dataTables 2.3.5 довольно новая, и во многих ответах и предложениях используется устаревший синтаксис.
Это демонстрирует частично решенные проблемы — обратите внимание, что сама таблица центрирована и меньше, но заголовки столбцов по-прежнему занимают 100 % ширины страницы.
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%;
}

Код: Выделить всё

startTime
nameOfBand
nameOfBar

Результат запуска фрагмента кода? – Отлично выглядит во фрагменте . Выполнение xedni.html в моем браузере демонстрирует поведение, описанное ранее. Вот: скриншот


Что я делаю неправильно/не правильно? ТИА,

Подробнее здесь: https://stackoverflow.com/questions/798 ... th-columns