How to center the table horizontally on the page?
How to center the table horizontally on the page?
AlphaR
Posts: 5Questions: 2Answers: 0
I have a table that has a varying number of columns on load, depending on a configuration setting. As such it can occupy only a small amount of space horizontally or take up enough space so that it needs horizontal scrolling.
I am using Bootstrap 4 DataTables and initialize it like this:
$('#table').DataTable({
"columnDefs": [{
"targets": 0,
"orderable": false
}],
order: [[1, 'asc']],
orderCellsTop: true,
scrollX: true,
searching: true,
fixedColumns: true,
pageLength: 5,
lengthChange: false,
dom: "<'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-4'f><'col-sm-12 col-md-4'i><'col-sm-12 col-md-4'p>>"
});
The table itself is generated inside these containers:
<div class=container-fluid">
<div class="text-center" id="data">
<div class="table-responsive overflow-hidden d-none" id="main">
<table id="table" class="table table-bordered table-hover text-nowrap">
</table>
</div>
</div>
</div>
When my table only has two columns it takes up very little space. It is aligned to the left of the screen while the control elements take up the whole space horizontally. I would like them to still do that but at the same time also center the table to the page horizontally. Is there any way to achieve this? I have tried applying margin and width styling with little luck. I fear that some options in my dataTable initialization may interfere with my task but I am unsure about it. The table works perfectly fine when it is big enough (and gets the scollbar).
Thanks!
Answers
I have solved the problem!
So, as I feared, "scrollX" was a problem for me. It was impossible for me to add styling to the table generated with "scrollX" (to make it centered when it didn't overflow). Instead I generate the table without scollX, check if the table needs a scrollbar because it is overflowing, and re-draw the table if it needs one. In this case I also don't have to center the table. In the case where I don't add a scrollbar I call
$('#table').css("margin", "0 auto");after initialization which centers only the table part just as I wanted (this is a solution I found in other topics but I couldn't apply since scollX generates different html).If you can give me a link to a page showing the issue with scrollX, I’ll take a look at it. It should be perfectly possible to centre a scrollX table.
Allan
Unfortunately I have not set up a public test site yet (probably never will). The page runs on ASP .NET, so data is filled in by the server-side renderer. It would take too much time for me to set something up that reflects the state of my page considering that I solved my problem in a way I am satisfied with for now.
I am not saying you are wrong about it being possible but I couldn't make it work, may it be my limited experience or some other problem with my page layout.
Thanks for your time and your work on DataTables!