Center a table within a div

Question

Please help, I have been stuck on this. I found many solutions online but not of them work in my case.

I'm trying to center the table. Here is how it looks now:

HTML:

<div class="container">
  <table id="multTable"></table>
</div>

CSS:

#multTable {
  width: 100%;
  margin: 0 auto;
  display:block;
  height: 200px;
  overflow-x:scroll;
  overflow-y:scroll;
}

I tried this:

.container {
  width: 100%;
}
#multTable {
  margin: 0 auto;
  height: 200px;
  overflow-x:scroll;
  overflow-y:scroll;
}

But the table overflows the page size: What am I doing wrong here?

Have you tried [this solution](https://stackoverflow.com/a/7059453/10347478) [or this one](https://stackoverflow.com/a/35383281/10347478) ? — Anis Brachemi, Oct 28 '20 at 23:19
can you add the code espacially css for the input box? as you want to align it with that, we need to copy some of its CSS values espacially width or margin left/right — tacoshy, Oct 28 '20 at 23:24
Just a note: `display:block;` on the table will overwrite/cancel the `table` behaviour. — Johannes, Oct 29 '20 at 00:48

score 2 · Accepted Answer · answered Oct 29 '20 at 00:35

In your initial try, your table won't be centered since you're trying to center something that is taking 100% of the possible space. Technically, it is centered, you just can't see it's taking the entire space.

So imagine if you have a container of 100px. There's a block inside of this container that you want to center. But you're setting this block to have 100px in width. There's just no gap to see!

So this won't work:

{ 
   width: 100%;
   margin: 0 auto;
}

Instead, you should give the centering element a fixed width:

width: 400px; /* or whatever is needed */
margin: 0 auto;

That way it has some space around it.

Here, check this out: https://jsfiddle.net/9gwcjvp3/

score 1 · Answer 2 · answered Oct 29 '20 at 00:22

1

have you tried this :

.container {
    //
}

#multTable {
    margin: 0 auto;
    overflow-x:scroll;
    overflow-y:scroll;
}

answered Oct 29 '20 at 00:22

IcebergK

24
5

score 1 · Answer 3 · answered Oct 29 '20 at 00:41

1

Make your container the full width of whatever it resides in. Then make the table and specify a max-width.

.container {
  width: 100%;
}
#multTable {
  max-width: 100%;
}

I would help more to see the rest of your hml.

answered Oct 29 '20 at 00:41

tim

677
9
11

score -2 · Answer 4 · answered Oct 28 '20 at 23:27

-2

Only add this

.container {
  display: flex;
  justify-content: center;
}

answered Oct 28 '20 at 23:27

Julian David Chavarro Balanta

47
2

Hi and welcome to SO. If you answerign a question, make sure to alsoa dd information of what youa dded and why youa dded. How your solutions works so that others can understand and learn from it. Besides of that, your anwser will not solve anything. The issue is, that the table width is already larger then then th wv and as such overflwos. Setting it to be a flexbox will not solve this. – tacoshy Oct 28 '20 at 23:38

Center a table within a div

4 Answers4