Why does this table not centered?

Question

naphets 0 Junior Poster in Training

11 Years Ago

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>

html-css web-design

4 Contributors
18 Replies
324 Views
1 Hour Discussion Span
Latest Post 11 Years Ago Latest Post by pixelsoul

pixelsoul 272 Red Pill

11 Years Ago

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;}

pixelsoul 272 Red Pill

11 Years Ago

Maybe I am missing something. I checked it out here and it looks centered to me http://jsfiddle.net/pixelsoul/S7xKg/

JorgeM 958 Problem Solver

11 Years Ago

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;}

pixelsoul 272 Red Pill

11 Years Ago

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

pixelsoul 272 Red Pill

11 Years Ago

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 }

Reply to this topic

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.

naphets 0 Junior Poster in Training · Answer 1 · 2013-03-10T00:51:33+00:00

.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;}

naphets 0 Junior Poster in Training · Answer 2 · 2013-03-10T01:02:09+00:00

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.

pixelsoul 272 Red Pill Featured Poster · Answer 3 · 2013-03-10T01:07:59+00:00

pixelsoul 272 Red Pill

11 Years Ago

Here you go http://jsfiddle.net/pixelsoul/tfrA5/2/

Edited 11 Years Ago by pixelsoul because: wrong address

naphets 0 Junior Poster in Training · Answer 4 · 2013-03-10T01:17:06+00:00

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

exact same... Thanks for the effort ;)

naphets 0 Junior Poster in Training · Answer 5 · 2013-03-10T01:21:39+00:00

<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>

pixelsoul 272 Red Pill Featured Poster · Answer 6 · 2013-03-10T01:22:08+00:00

pixelsoul 272 Red Pill

11 Years Ago

You didn't use the code from the fiddle.

naphets 0 Junior Poster in Training · Answer 7 · 2013-03-10T01:34:08+00:00

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

naphets 0 Junior Poster in Training · Answer 8 · 2013-03-10T01:43:54+00:00

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.

<M/> 170 Why so serious? Featured Poster · Answer 9 · 2013-03-10T01:45:42+00:00

here is a tutorial that will teach on how to center a table.
http://theodorakis.net/tablecentertest.html

Once you see how they do it, then you will see what to do.

pixelsoul 272 Red Pill Featured Poster · Answer 10 · 2013-03-10T01:47:37+00:00

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

<M/> 170 Why so serious? Featured Poster · Answer 11 · 2013-03-10T01:48:48+00:00

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

naphets 0 Junior Poster in Training · Answer 12 · 2013-03-10T02:00:28+00:00

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 ;)

pixelsoul 272 Red Pill Featured Poster · Answer 13 · 2013-03-10T02:04:24+00:00

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 :)