CODEWITHSUNDEEP
htmlcss
anechkayf
anechkayf

Reputation: 545

Center a table within a div

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: enter image description here

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: enter image description here What am I doing wrong here?

Upvotes: 1

Views: 2088

Answers (4)

tim
tim

Reputation: 727

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.

Upvotes: 1

better-strangers
better-strangers

Reputation: 86

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/

Upvotes: 2

IcebergK
IcebergK

Reputation: 24

have you tried this :

.container {
    //
}

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

Upvotes: 1

Julian David Chavarro Balanta
Julian David Chavarro Balanta

Reputation: 47

Only add this

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

Upvotes: -2

Related Questions