CODEWITHSUNDEEP
htmlcsshtml-table
user1653626
user1653626

Reputation: 11

I can't seem to center this table

I'm trying to get this table to be centered but whenever I view the page, it shows up aligned to the left.

CSS

.center {

    margin-left:auto; 
    margin-right:auto;
  }
#hor-minimalist-a
{
  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  background: transparent;
  margin: 45px;
  width: 480px;
  border-collapse: collapse;
  text-align: center;
  line-height: 1.6em;
}
#hor-minimalist-a th
{
  font-size: 14px;
  font-weight: normal;
  color: #039;
  padding: 10px 8px;
  border-bottom: 2px solid #6678b1;
}
#hor-minimalist-a td
{
  color: #669;
  padding: 9px 8px 0px 8px;
}

and here is the html that I am using to test:

<table class="center" id="hor-minimalist-a" >
   All of the table data goes here
</table>

Upvotes: 0

Views: 447

Answers (2)

android.dev
android.dev

Reputation: 26

This should remove "margin: 45px" from the following rule:

    #hor-minimalist-a
    {
      font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
      font-size: 16px;
      background: transparent;
      margin: 45px;
      width: 480px;
      border-collapse: collapse;
      text-align: center;
      line-height: 1.6em;
    }

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

The problem is one of specificity in your CSS rules:

.center {
    margin-left:auto;
    margin-right:auto;
}
#hor-minimalist-a {
    font-family:"Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    background: transparent;
    /* margin: 45px; */
    width: 480px;
    border-collapse: collapse;
    text-align: center;
    line-height: 1.6em;
    border: 1px dashed blue;
}

In your CSS, you have set margin: 45px in your #hor-minimalist-a rule, which has a higher specificity than your .center class which has your left/right margin rule.

If you comment out the margin: 45px rule, your table centers.

See demo at: http://jsfiddle.net/audetwebdesign/JxMD3/

Note: Using margins to center tables
As pointed out in one of the comments, using margin left/right of auto will center the table even if you don't specify the width (that is, use width: auto).
Reference: http://www.w3.org/TR/CSS2/tables.html#width-layout

Note: About specificity
For details about how specificity works, see: http://www.w3.org/TR/CSS2/cascade.html#specificity

Upvotes: 3

Related Questions