0

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>
4
Contributors
18
Replies
34
Views
4 Years
Discussion Span
Last Post by pixelsoul
Featured Replies
  • 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 … Read More

0

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

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

Edited by naphets

0

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

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.

0

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

exact same... Thanks for the effort ;)

Attachments TESTCSSTABLE-ERROR.png 42.46 KB
0
<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>
0

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

Edited by naphets

Attachments Screenshot.png 43.69 KB
2

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

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.

Edited by naphets

0

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

Edited by naphets

0

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.