Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Center a non-nested table thru CSS

Status
Not open for further replies.
MasterRacker

MasterRacker

New member
Oct 13, 1999
3,343
US
Conditions: External style sheet, table cannot be nested in another table. I would like to define a class of table that stays centered in the browser window and has a fixed width.

Style sheet has:
[tt]
TABLE.stdtable{
WIDTH:800
}
[/tt]

HTML Page ideally has:
[tt]
<body>
<table class=stdtable>
...
</table>
</body>
[/tt]

Using <table class-stdtable align=center> does exactly what I want but leaves me with page level calls instead of a single site-wide modification point.

I've been looking at and elsewhere. I've tried margin-left:auto margin-right:auto and I've also tried float:center without luck.

From what I've seen the CSS2 spec dowsn't seem to provide for this directly. The only work-around I can think of is an external JaveScript funtion that writes the HTML code and gives me a single point of modification. That adds an extra layer of indirection that shouldn't need to be there though. Any other suggestions?


Jeff
I haven't lost my mind - I know it's backed up on tape somewhere ....
 
Sort by date Sort by votes
Does not work for me.

I'm doing an intranet for use on IE 5.5. From what I can find, the preferred method is the &quot;margin-left:auto; margin-right:auto&quot; pair, but IE doesn't fully support CSS2.
Jeff
I haven't lost my mind - I know it's backed up on tape somewhere ....
 
Upvote 0 Downvote
How about this

<style>
BODY {text-align:center;}
TABLE.stdtable{
WIDTH:800
}
</style>

Tom
 
Upvote 0 Downvote
Actually that doesn't work in NS6 but seems to in everything else.

Tom
 
Upvote 0 Downvote
From my research, that appears to be a browser bug as well. It looks like text-align is not supposed to affect a table, only it's contents.

Unfortunately, in my situation, I do have more than one body style. I'm also worried about other side effects from messing with the body.
Jeff
I haven't lost my mind - I know it's backed up on tape somewhere ....
 
Upvote 0 Downvote
Here is the relevant text from the &quot;tables&quot; section of the CSS2 specification ( :

The following example shows how to put a caption in the left margin. The table itself is centered, by setting its left and right margins to 'auto', and the whole box with table and caption is shifted into the left margin by the same amount as the width of the caption.
[tt]
BODY {
margin-left: 8em
}
TABLE {
margin-left: auto;
margin-right: auto
}
CAPTION {
caption-side: left;
margin-left: -8em;
width: 8em;
text-align: right;
vertical-align: bottom
}

[/tt]

IE, at least, does not appear to support this correctly.
Jeff
I haven't lost my mind - I know it's backed up on tape somewhere ....
 
Upvote 0 Downvote
the table{float: right;} is the only thing i know which can
do that what you want for tables.

sorry,

BobbaFet Everyone has a right to my opinion.
E-mail me at caswegkamp@hotmail.com
 
Upvote 0 Downvote
BobbaFet, that doesn't work (for me at least) in IE 5.5. Putting TEXT-ALIGN:center; in the BODY section as suggested by MrGrey works but caused me a couple of quirks in positioning of the table's content. By explicitly definging everything inside the table I was able to control it.

I ended up with the following:

[tt]
/* The text-align:center tag is a browser bug dependent work-around to make the tables center in IE5.5. */
BODY {
FONT-FAMILY:sans-serif; BACKGROUND-COLOR:&quot;#FFFFFF&quot;; TEXT-ALIGN:center;
}

TABLE.stdtable{
WIDTH:800px; MARGIN-LEFT:auto; MARGIN-RIGHT:auto;
}
[/tt]

This way, if IE 6 supports CSS2 correctly (which I've heard but can't test), after we upgrade I will only have to fix the body style and the rest of the site should need no modification.
Jeff
I haven't lost my mind - I know it's backed up on tape somewhere ....
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
682
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
555
PeDa
PeDa
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
649
3esolar
3
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
183
Alt255
Alt255

Part and Inventory Search

Sponsor

Back
Top