Why does this not center the table? The table header & the table footer are aligned center?
I have beat this like a dead horse, i cant even rememebr what the original code i wrote was i have changed it unsuccesfully so many times. Yet nothing ever changed no matter what i did.
Below is the table... Below that is the css styles...

<div id="H1">TEST CSS TABLE</div>
<div style="text-align: center; margin-left: auto; margin-right: auto;">
<div id="table">
<div id="thead">Table Header</div>
  <div class="row">
    <span class="cell">row 1, cell 1</span>
    <span class="cell">row 1, cell 2</span>
     <span class="cell">row 1, cell 3</span>
  </div>
  <div class="row">
    <span class="cell">row 2, cell 1</span>
    <span class="cell">row 2, cell 2</span>
     <span class="cell">row 2, cell 3</span>
  </div>
  <div class="row">
    <span class="cell">row 3, cell 1</span>
    <span class="cell">row 3, cell 2</span>
     <span class="cell">row 3, cell 3</span>
  </div>
<div id="tfoot">Table Footer</div>
</div>
</div>

css...

<style type="text/css">
body {
   margin:10en;
   padding:0;
   height:100%;
   width:80%;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
}
#container {
   min-height:100%;
   position:relative;
   height:100%;
}
#header {
   background:#009900;
   padding:10px;
   width:100%;
   height:125px;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 64pt;
   font-weight: 900;
   color: #FFFFFF;
   text-align: center;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}

#footer {
   position:absolute;
   bottom:0;
   width:80%;
   height:60px;   /* Height of the footer */
   background:#6006600;
}
#H1 {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 24pt;
    font-weight: 900;
    color: green;
    padding-top: 24px;
    padding-bottom: 3px;
}
.table     { display: table; border-collapse: collapse; text-align: center;}
.tr        { display: table-row; border: 1px solid #000;}
.thead     { display: table-header-group }
.tbody     { display: table-row-group }
.tfoot     { display: table-footer-group }
.col       { display: table-column }
.colgroup  { display: table-column-group }
.cell      { display: table-cell; border: 1px solid #000;}
.caption   { display: table-caption }
</style>

Recommended Answers

All 18 Replies

I don't see a table.. I only see a div with an id=table

It isn't centered because you haven't told it to center. There isn't even a css for that id, but you do have a class for .table

If it is really supposed to have the id=table on it and not the class you could just add:

#table{margin: 0 auto;}

.table { display: table; border-collapse: collapse; text-align: center;}
is the only thing it would respond to @ all.
#table { display: table; border-collapse: collapse; text-align: center;}
table { display: table; border-collapse: collapse; text-align: center;}
& deleting were the same result of not listening to me.
Once i did it the way i have it, the table border appeared.
also this is how the sample code came from a how to page somewhere.
table { display: table;}

If you want to center content, wrap the content within a pair of opening and closing div tags.

Apply a width and left and right margins.

For example...style to apply:

 #divCenter {width:1024px;margin:0 auto;}

Maybe I am missing something.

Your snapshot does not show a border... in fact it resembles with what i started with. The border would not show, until i used the line in question...
.table { display: table; border-collapse: collapse; text-align: center;}

But after it showed the border, it wasnt centered.

lol, ignore my fiddle... I was working a ton with js earlier put the css in the javascript frame...

divCenter {width:1024px;margin:0 auto;}

exact same... Thanks for the effort ;)

<html>
<head>
<style type="text/css">
body {
   margin:10en;
   padding:0;
   height:100%;
   width:80%;
   text-align: center;
   margin-left: auto;
   margin-right: auto;

}
#container {
   min-height:100%;
   position:relative;
   height:100%;
}
#header {
   background:#009900;
   padding:10px;
   width:100%;
   height:125px;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 64pt;
   font-weight: 900;
   color: #FFFFFF;
   text-align: center;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:80%;
   height:60px;   /* Height of the footer */
   background:#6006600;
}
#H1 {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 24pt;
    font-weight: 900;
    color: green;
    padding-top: 24px;
    padding-bottom: 3px;
}
.table     { display: table; border-collapse: collapse; text-align: center;}
.tr        { display: table-row; border: 1px solid #000;}
.thead     { display: table-header-group }
.tbody     { display: table-row-group }
.tfoot     { display: table-footer-group }
.col       { display: table-column }
.colgroup  { display: table-column-group }
.cell      { display: table-cell; border: 1px solid #000;}
.caption   { display: table-caption }
#divCenter {width:1024px;margin:0 auto;}
</style>
</head>
<title>TEST CSS TABLE</title>
<div id="body">
<div id="H1">TEST CSS TABLE</div>
<div id="divCenter">
<div id="table">
<div id="thead">Table Header</div>
  <div class="row">
    <span class="cell">row 1, cell 1</span>
    <span class="cell">row 1, cell 2</span>
     <span class="cell">row 1, cell 3</span>
  </div>
  <div class="row">
    <span class="cell">row 2, cell 1</span>
    <span class="cell">row 2, cell 2</span>
     <span class="cell">row 2, cell 3</span>
  </div>
  <div class="row">
    <span class="cell">row 3, cell 1</span>
    <span class="cell">row 3, cell 2</span>
     <span class="cell">row 3, cell 3</span>
  </div>
<div id="tfoot">Table Footer</div>
</div>
</div>
<div id="footer">
<div id="H1">FOOTER</div>
</div>
</div>
</html>

You didn't use the code from the fiddle.

You didn't use the code from the fiddle.

<html>
<head>
<style type="text/css">
body {
   margin:10en;
   padding:0;
   height:100%;
   width:80%;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
}
#container {
   min-height:100%;
   position:relative;
   height:100%;
}
#header {
   background:#009900;
   padding:10px;
   width:100%;
   height:125px;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 64pt;
   font-weight: 900;
   color: #FFFFFF;
   text-align: center;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:80%;
   height:60px;   /* Height of the footer */
   background:#6006600;
}
#H1 {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 24pt;
    font-weight: 900;
    color: green;
    padding-top: 24px;
    padding-bottom: 3px;
}
.table     { display: table; border-collapse: collapse; text-align: center; margin:0 auto;}
.tr        { display: table-row; border: 1px solid #000;}
.thead     { display: table-header-group }
.tbody     { display: table-row-group }
.tfoot     { display: table-footer-group }
.col       { display: table-column }
.colgroup  { display: table-column-group }
.cell      { display: table-cell; border: 1px solid #000;}
.caption   { display: table-caption }
</style>
</head>
<title>TEST CSS TABLE</title>
<div id="body">
<div id="H1">TEST CSS TABLE</div>
<div style="text-align: center; margin-left: auto; margin-right: auto;">
<div id="table">
<div id="thead">Table Header</div>
  <div class="row">
    <span class="cell">row 1, cell 1</span>
    <span class="cell">row 1, cell 2</span>
     <span class="cell">row 1, cell 3</span>
  </div>
  <div class="row">
    <span class="cell">row 2, cell 1</span>
    <span class="cell">row 2, cell 2</span>
     <span class="cell">row 2, cell 3</span>
  </div>
  <div class="row">
    <span class="cell">row 3, cell 1</span>
    <span class="cell">row 3, cell 2</span>
     <span class="cell">row 3, cell 3</span>
  </div>
<div id="tfoot">Table Footer</div>
</div></div>
<div id="footer">
<div id="H1">FOOTER</div>
</div>
</div>
</html>

same result again... thats all i ever get is the same result

lol... that is not all the code from the fiddle.

The markup:

<div id="H1">TEST CSS TABLE</div>
<div style="text-align: center; margin-left: auto; margin-right: auto;">
<div class="table">
<div id="thead">Table Header</div>
  <div class="row">
    <span class="cell">row 1, cell 1</span>
    <span class="cell">row 1, cell 2</span>
     <span class="cell">row 1, cell 3</span>
  </div>
  <div class="row">
    <span class="cell">row 2, cell 1</span>
    <span class="cell">row 2, cell 2</span>
     <span class="cell">row 2, cell 3</span>
  </div>
  <div class="row">
    <span class="cell">row 3, cell 1</span>
    <span class="cell">row 3, cell 2</span>
     <span class="cell">row 3, cell 3</span>
  </div>
<div id="tfoot">Table Footer</div>
</div>
</div>

And the CSS:

body {
   margin:10en;
   padding:0;
   height:100%;
   width:80%;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
}
#container {
   min-height:100%;
   position:relative;
   height:100%;
}
#header {
   background:#009900;
   padding:10px;
   width:100%;
   height:125px;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 64pt;
   font-weight: 900;
   color: #FFFFFF;
   text-align: center;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:80%;
   height:60px;   /* Height of the footer */
   background:#6006600;
}
#H1 {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 24pt;
    font-weight: 900;
    color: green;
    padding-top: 24px;
    padding-bottom: 3px;
}
.table     { display: table; border-collapse: collapse; text-align: center;margin:0 auto;}
.tr        { display: table-row; border: 1px solid #000;}
.thead     { display: table-header-group }
.tbody     { display: table-row-group }
.tfoot     { display: table-footer-group }
.col       { display: table-column }
.colgroup  { display: table-column-group }
.cell      { display: table-cell; border: 1px solid #000;}
.caption   { display: table-caption }

JorgeM Senior Poste
made a suggestion first, i tried it though it was a minor change because i was already trying sort of the same thing.
Then pixelsoul Posting Whiz in Training
made a suggestion, i was unable to copy paste because idk why, so i stopped trying to copy & the only differences i could locate i changed.
Both changes i posted the full code of what i am working with and a snapshot showing identical behavior.
Thats the update
if i am making mistakes please post the entire code here so i can copy paste and try it.

lol... that is not all the code from the fiddle.

Well then please post code in a manner in which a human may copy it, the fiddle would not alow me.

I really don't know what to say. The code I posted above your last post does what you're asking.

it does, he probably is over writing it or having browser issues

I really don't know what to say. The code I posted above your last post does what you're asking.

My post posted after yours, then i tried your new post which was not a fiddle.
It totally worked, so i looked until i found the extra difference.
<div id="table"> `` vs<div class="table">``

I guess what i am saying is that fiddle doesnt work for me, nor have i ever heard of it. I assume its some sort of "free" cloud service. Ya free right, we all like spending thousnads just to be nice. OR is it some type of datamart selling you out. anyways im rambling...
thanks to all that helped ;)

Glad you got it to work. Fiddler is just easy way to show the results of some markup, css, and js and then share it. It is actually pretty cool :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.