Display table with 'display: block;' at the center of a page - html

Question

I have a very large table that doesn't fit a page and I added horizontal scrollbar like this:
.table-x-scroll {
display: block;
overflow-x: auto;
white-space: nowrap;
}
And <table class="table-x-scroll">...</table>
But I also want my table to be in the center of a page. I used to use align="center" but now, when I added display: block it doesn't work. Table is always at the left. How can I do these two things at the same time?

Answer 1

Would be better to use a wrapper for the table and add overflow to that wrapper not the table it self. This way you can control the behavior better.
And also use margin:0 auto on table to center it horizontally. No need for display:block
See below or better in jsFIddle
table {
border: 2px solid red;
width: 300px;
margin: 0 auto;
}
td {
border: 1px solid red;
}
.wrapper {
width: 100%;
overflow-x: auto;
}
<div class="wrapper">
<table>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
</tr>
<tr>
<td>a</td>
<td>a</td>
</tr>
</table>
</div>

Answer 2

Try to add margin-left:auto; margin-right:auto; in your style and specify the width
.table-x-scroll {
display: block;
overflow-x: auto;
white-space: nowrap;
margin-left:auto;
margin-right:auto;
width:50%;
}
<table class="table-x-scroll" border="1">
<tbody>
<row>
<td>AA</td>
<td>BB</td>
</row>
</tbody>
</table>

Answer 3

Try adding Margin : 0 auto
.table-x-scroll {
display: block;
overflow-x: auto;
white-space: nowrap;
margin : 0 auto
}

Answer 4

I can see that others have answered the aligning problem. But i couldn't see the "Doesn't fit to page" error so here is a solution for that:
In the css you specified overflow-x: auto;
If you change that to overflow-x scroll; it will make it scale to whatever size you choose to specify. and make it scrollable. The scrollbar within is possible to edit/remove, but it will still scroll ^^
I personally recommend the vw,vh values
example:
.bunnydiv {font-size: 1vw, 1vh;} This will make it scale to 1% of the width and of the height of the monitor. This can be specified with either vh, vw, vh and vw. Not both paramaters are needed, and it will scale accordingly :-)
I found some code I made myself some time ago, use this as a reference :-)
.div_scroll
{overflow-y: scroll;
display: block;
top:0px;
right: 0px;
position: absolute;
transform: translate(-23.6vw, 15vh);
border: 3px solid #dddddd;
max-height: 75vh;
width: 76vw;
margin: 0px;
background-color: white;}
It's copy-pasted, and setup this way for readability. Don't format you code like this unless it works better for you :-)