I have implemented a DataTables-enhanced HTML table for sorting and horizontal scrolling on tablets and mobile devices, which works well on smaller viewports.
However, I am encountering issues with the desktop viewport:
On desktop, my goal for the table is to:
- Fit within its container with a maximum width of 1300px,
- Be centered horizontally on the screen,
- Avoid horizontal scrolling,
- Ensure that column widths are not excessively large, adjusting according to the longest value in each column purposefully.
Whenever I try to set the table’s width and center it manually, I face one of two problems:
- The table header (
thead) becomes misaligned, appearing offset to the left, while the body of the table (tbody) is centered. - Both the header and body of the table are centered, but the column widths do not match between them, causing alignment issues and confusion.
How can I ensure that the table header and data cells remain properly aligned while achieving the desired styling and layout on the desktop viewport, considering the setup already functioning correctly on smaller viewports?
Here is my current setup:
HTML table:
<div class="table-container-byty" style="width: 100%;">
<table class="custom-byty-table display" style="width: 100%;">
<thead>
<tr>
<th>Unit Label</th>
<th>Floor</th>
<th>Number of Rooms</th>
<th>Building</th>
<th>Unit Area</th>
<th>Balcony Area</th>
<th>Total Area</th>
<th>Price</th>
<th>Unit Status</th>
<th>View Unit</th>
</tr>
</thead>
<tbody>
// Table rows content here
</tbody>
</table>
</div>
jQuery Datatables initialization JavaScript at the end of <body> tag:
// JavaScript code here
CSS:
// CSS styles here