How to properly size and center a DataTables table on desktop while maintaining alignment between header and data cells?

I am using a DataTables-enhanced HTML table for sorting and to enable horizontal scrolling on tablets and mobile devices. This setup works well on smaller viewports, where the table is horizontally scrollable and properly aligned.

However, I’m having issues with the desktop viewport.

On desktop, I want the table to:

Fit within its container with a maximum width of 1300px,
Be centered horizontally on the screen,
Not require horizontal scrolling,
Columns' width should not be too large, meaning, they should adjust according to the longest value in the given column and not have them to be too long without any purpose.

When I attempt to manually set the table’s width and center it, I always encounter one of two issues:

The table header (thead) becomes misaligned, positioned to the left, while the table body (tbody) is centered.
Both the header and table body are centered, but the column widths of the header and data rows do not match, causing misalignment and confusion.

How can I ensure that the table header and data cells remain properly aligned while achieving the desired styling and layout on desktop viewports since my setup seems to be working correctly on smaller viewports already?

Here is my setup:

HTML table:

<div class="table-container-byty" style="width: 100%;">
    <table class="custom-byty-table display" style="width: 100%;">
        <thead>
            <tr>
                <th>Označenie bytu</th>
                <th>Poschodie</th>
                <th>Počet izieb</th>
                <th>Budova</th>
                <th>Výmera bytu</th>
                <th>Výmera balkónu</th>
                <th>Celková výmera</th>
                <th>Cena HOLOBYT</th>
                <th>Stav bytu</th>
                <th>Zobraziť byt</th>
            </tr>
        </thead>
        <tbody>
            <tr style="background-color: yellow;">
                <td>501-A</td>
                <td>5</td>
                <td>3</td>
                <td>A</td>
                <td>79.40</td>
                <td>11.56</td>
                <td>90.96</td>
                <td>-</td>
                <td style="color: rgb(228, 129, 0);">Rezervovaný</td>
                <td><a href="https://www.example.com/" class="btn-details-byt">Zobraziť</a></td>
            </tr>
            <tr style="background-color: yellow;">
                <td>506-A</td>
                <td>5</td>
                <td>3</td>
                <td>A</td>
                <td>67.33</td>
                <td>11.51</td>
                <td>78.84</td>
                <td>-</td>
                <td style="color: rgb(228, 129, 0);">Rezervovaný</td>
                <td><a href="https://www.example.com/" class="btn-details-byt">Zobraziť</a></td>
            </tr>
            <tr>
                <td>502-A</td>
                <td>5</td>
                <td>3</td>
                <td>A</td>
                <td>79.96</td>
                <td>11.47</td>
                <td>91.43</td>
                <td>306 800 €</td>
                <td>Voľný</td>
                <td><a href="https://www.example.com/" class="btn-details-byt">Zobraziť</a></td>
            </tr>
            <tr>
                <td>503-A</td>
                <td>5</td>
                <td>2</td>
                <td>A</td>
                <td>59.90</td>
                <td>11.56</td>
                <td>71.46</td>
                <td>235 110 €</td>
                <td>Voľný</td>
                <td><a href="https://www.example.com/" class="btn-details-byt">Zobraziť</a></td>
            </tr>
            <tr>
                <td>504-A</td>
                <td>5</td>
                <td>2</td>
                <td>A</td>
                <td>56.07</td>
                <td>7.50</td>
                <td>63.57</td>
                <td>219 916 €</td>
                <td>Voľný</td>
                <td><a href="https://www.example.com/" class="btn-details-byt">Zobraziť</a></td>
            </tr>
            <tr>
                <td>502-B</td>
                <td>5</td>
                <td>3</td>
                <td>B</td>
                <td>78.64</td>
                <td>11.51</td>
                <td>90.15</td>
                <td>307 128 €</td>
                <td>Voľný</td>
                <td><a href="https://www.example.com/" class="btn-details-byt">Zobraziť</a></td>
            </tr>
        </tbody>
    </table>
</div>

jQuery Datatables initialization JavaScript placed at the end of <body> tag:

<script>
    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
        });
    });
</script>

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
 **/

Solution

You could set the 1300px of width on the container, then set a max-width to table.

Possible fix if i understood (css commented for explanation)

.table-container-byty {
  width: 1300px !important;/* set your max width */
  max-width: 100% !important;/* shrink it to avalaible space */
  margin: auto;/* optionnal*/
}
.table-container-byty table {/* select only those tables */
  font-weight: bold;
  max-width: 100%;/* shrink it to avalaible space as much as possible */
}

other possible fix from the comments below https://codepen.io/gc-nomade/pen/RNbRxxz

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: '100%',
    bScrollCollapse: true,
    paging: false, // Disable pagination
    searching: false, // Disable search bar
    ordering: true, // Enable column sorting
    info: true, // Show table info
    autoWidth: true, // Disable automatic column width calculation
    fixedHeader: {
      header: true,
      headerOffset: headerOffset // Use the dynamically calculated headerOffset
    },
    dom: 'frtiS',
    deferRender: true
  });
});

/** Make all the texts in the table to be bold **/

.table-container-byty {
  width: 1300px !important;
  max-width: 100% !important;
  margin: auto;
}

.table-container-byty table {
  font-weight: bold;
  max-width: 100%;
  min-width: 600px;
  table-layout: fixed;
}

* {
  box-sizing: border-box;
}

.table-container-byty table tr>* {
  text-overflow: ellipsis;
  overflow: hidden;
}


/**
 * 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 */
}


/* Optional: Ensure the "Zobraziť" button in the last column is styled consistently */

.custom-byty-table tbody td a.btn-details-byt {
  color: #0a393b;
  /* Button color to match header */
  text-decoration: none;
  /* Remove underline from button */
}

.custom-byty-table tbody td a.btn-details-byt:hover {
  text-decoration: underline;
  /* Underline the link on hover */
}


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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<div class="table-container-byty" style="width: 100%;">
  <table class="custom-byty-table display" style="width: 100%;">
    <thead>
      <tr>
        <th>Označenie bytu</th>
        <th>Poschodie</th>
        <th>Počet izieb</th>
        <th>Budova</th>
        <th>Výmera bytu</th>
        <th>Výmera balkónu</th>
        <th>Celková výmera</th>
        <th>Cena HOLOBYT</th>
        <th>Stav bytu</th>
        <th>Zobraziť byt</th>
      </tr>
    </thead>
    <tbody>
      <tr style="background-color: yellow;">
        <td>501-A</td>
        <td>5</td>
        <td>3</td>
        <td>A</td>
        <td>79.40</td>
        <td>11.56</td>
        <td>90.96</td>
        <td>-</td>
        <td style="color: rgb(228, 129, 0);">Rezervovaný</td>
        <td><a href="https://www.example.com/" class="btn-details-byt">Zobraziť</a></td>
      </tr>
      <tr style="background-color: yellow;">
        <td>506-A</td>
        <td>5</td>
        <td>3</td>
        <td>A</td>
        <td>67.33</td>
        <td>11.51</td>
        <td>78.84</td>
        <td>-</td>
        <td style="color: rgb(228, 129, 0);">Rezervovaný</td>
        <td><a href="https://www.example.com/" class="btn-details-byt">Zobraziť</a></td>
      </tr>
      <tr>
        <td>502-A</td>
        <td>5</td>
        <td>3</td>
        <td>A</td>
        <td>79.96</td>
        <td>11.47</td>
        <td>91.43</td>
        <td>306 800 €</td>
        <td>Voľný</td>
        <td><a href="https://www.example.com/" class="btn-details-byt">Zobraziť</a></td>
      </tr>
      <tr>
        <td>503-A</td>
        <td>5</td>
        <td>2</td>
        <td>A</td>
        <td>59.90</td>
        <td>11.56</td>
        <td>71.46</td>
        <td>235 110 €</td>
        <td>Voľný</td>
        <td><a href="https://www.example.com/" class="btn-details-byt">Zobraziť</a></td>
      </tr>
      <tr>
        <td>504-A</td>
        <td>5</td>
        <td>2</td>
        <td>A</td>
        <td>56.07</td>
        <td>7.50</td>
        <td>63.57</td>
        <td>219 916 €</td>
        <td>Voľný</td>
        <td><a href="https://www.example.com/" class="btn-details-byt">Zobraziť</a></td>
      </tr>
      <tr>
        <td>502-B</td>
        <td>5</td>
        <td>3</td>
        <td>B</td>
        <td>78.64</td>
        <td>11.51</td>
        <td>90.15</td>
        <td>307 128 €</td>
        <td>Voľný</td>
        <td><a href="https://www.example.com/" class="btn-details-byt">Zobraziť</a></td>
      </tr>
    </tbody>
  </table>
</div>