CODEWITHSUNDEEP
htmlcsscss-tables
Thomas Pen
Thomas Pen

Reputation: 77

Centering multiple tables in CSS

I'm new to HTML & CSS. I made multiple tables and wish to display them all on one line inside a box. I tried the following but this doesn't seem to work. Can someone please fix this? This is my CSS code: 

#content2{
   margin: 30px 0;
   background: white;
   padding: 20px;
   clear: both;
   box-shadow: 0px 1px 1px #999;
   text-align: center;
   overflow:hidden;

}

table{
  margin-right: auto;
  margin-left: auto;
  float:left;
}
td,th{
  padding: 20px;
}

The HTML should be correct.

Upvotes: 1

Views: 1615

Answers (2)

Lee
Lee

Reputation: 10603

You have a few options that im aware of.

1 . If you want it pure CSS and "dynamic" (i.e. you dont know the width beforehand) you can set the table to display: inline-block and remove your float. This works in chrome, but you may have issues with IE, especially older versions.

http://jsfiddle.net/ZfX2M/

2 . If you know the width then set an inner content div with that width, and margin:auto it.

http://jsfiddle.net/AuF7z/1/

3 . if you don't know the width, but your happy to use JS, then do the same as above, but calculate the width in JS (i use jQuery as its what im used to, but you could use raw JS)

http://jsfiddle.net/mVADm/1/

Upvotes: 0

Kippie
Kippie

Reputation: 3820

Rather than using float: left, display the tables as inline by using display: inline-block

Example

Do know that this will make it so table elements won't get their default full width (which you probably don't want to begin with).

Upvotes: 1

Related Questions