Как правильно определить размер и центрировать таблицу DataTables на рабочем столе, сохраняя при этом выравнивание между ⇐ Jquery

[Anonymous]

Я использую HTML-таблицу, улучшенную DataTables, для сортировки и включения горизонтальной прокрутки на планшетах и ​​мобильных устройствах. Эта настройка хорошо работает на небольших окнах просмотра, где таблица прокручивается по горизонтали и правильно выровнена.
Однако у меня возникают проблемы с областью просмотра рабочего стола.
На рабочем столе я хочу, чтобы таблица:

• Помещалась в контейнере с максимальной шириной 1300 пикселей,
  />
• Быть центрированным по горизонтали на экране.
• Не требовать горизонтальной прокрутки.
• Ширина столбцов не должна быть слишком большой, то есть они должны регулироваться в соответствии с самым длинным значением в данном столбце и не должны быть слишком длинными без какой-либо цели.
  />

Когда я пытаюсь вручную установить ширину таблицы и центрировать ее, я всегда сталкиваюсь с одной из двух проблем:

• Заголовок таблицы (thead) смещается, позиционируется влево,
  в то время как тело таблицы (tbody) центрировано.
• И заголовок, и тело таблицы центрированы, но ширина столбцов
  строков заголовка и данных не совпадают, вызывает несовпадение и
  путаницу.

Как я могу гарантировать, что заголовок таблицы и ячейки данных остаются правильно выровненными, обеспечивая при этом желаемый стиль и макет на окнах просмотра рабочего стола с момента моей настройки кажется, уже работает правильно на меньших окнах просмотра?
Вот моя настройка:
Таблица HTML:




Označenie bytu
Poschodie
Počet izieb
Budova
Výmera bytu
Výmera balkónu
Celková výmera
Cena HOLOBYT
Stav bytu
Zobraziť byt




501-A
5
3
A
79.40
11.56
90.96
-
Rezervovaný
Zobraziť


506-A
5
3
A
67.33
11.51
78.84
-
Rezervovaný
Zobraziť


502-A
5
3
A
79.96
11.47
91.43
306 800 €
Voľný
Zobraziť


503-A
5
2
A
59.90
11.56
71.46
235 110 €
Voľný
Zobraziť


504-A
5
2
A
56.07
7.50
63.57
219 916 €
Voľný
Zobraziť


502-B
5
3
B
78.64
11.51
90.15
307 128 €
Voľný
Zobraziť





Инициализация таблиц данных jQuery JavaScript, размещенный в конце тега :

jQuery(document).ready(function () {
// Calculate the height of the sticky menu bar
const menuBarHeight = jQuery('#menu-bar-rlp').outerHeight();

// Determine the header offset based on screen size
let headerOffset = menuBarHeight; // Default for tablet/mobile
if (window.innerWidth > 1024) { // For desktop (screens wider than 1024px)
headerOffset = menuBarHeight + 30; // Add extra space for desktop
}

// Initialize DataTable
jQuery('.custom-byty-table').DataTable({
responsive: false, // Disable responsive, no collapsing under the "+" button on mobile devices
sScrollX: '100%',
sScrollXInner: '110%',
bScrollCollapse: true,
paging: false, // Disable pagination
searching: false, // Disable search bar
ordering: true, // Enable column sorting
info: true, // Show table info
autoWidth: false, // Disable automatic column width calculation
fixedHeader: {
header: true,
headerOffset: headerOffset // Use the dynamically calculated headerOffset
},
dom: 'frtiS',
deferRender: true
});
});


CSS:
/** Make all the texts in the table to be bold **/
table {
font-weight: bold;
}

/**
* STYLE THE CUSTOM BYTY TABLE
**/

/* Style for the table header */
.custom-byty-table thead {
background-color: #0A393B; /* Set header background color */
}

.custom-byty-table thead th {
color: white; /* Set header text color */
font-weight: bold; /* Make header text bold */
}

/* Style for table rows */
.custom-byty-table tbody tr:nth-child(odd) {
background-color: #A8DEA1; /* Odd rows background color */
}

.custom-byty-table tbody tr:nth-child(even) {
background-color: white; /* Even rows background color */
}

.custom-byty-table tbody td {
font-weight: bold; /* Make body text bold */
color: black; /* Set body text color to black */
}

/** Style the buttons in the table **/
.table-container-byty .btn-details-byt {
display: inline-block; /* Ensure it looks like a button */
background-color: #0A393B; /* TailwindCSS-like blue */
color: white; /* White text for contrast */
font-weight: 600; /* Semi-bold text */
padding: 8px 16px; /* Comfortable padding */
border-radius: 8px; /* Rounded corners for a modern look */
text-decoration: none; /* Remove underline for links */
text-align: center; /* Center the text */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
transition: all 0.15s ease-in-out; /* Smooth transition for hover effects */
}

.table-container-byty .btn-details-byt:hover {
background-color: #0A393B; /* Darker blue on hover */
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Slightly larger shadow */
transform: scale(1.05);
}

.table-container-byty .btn-details-byt:focus {
outline: none; /* Remove default outline */
box-shadow: 0 0 0 3px #76AB81; /* Blue focus ring */
}

/**
* END OF STYLING OF CUSTOM BYTY TABLE
**/


Подробнее здесь: https://stackoverflow.com/questions/792 ... aintaining