How to have a TD's alignment override a TABLE's?

Forum Moderators: not2easy

Message Too Old, No Replies

How to have a TD's alignment override a TABLE's?

Cells' alignment always follows what's set in TABLE

MichaelBluejay

9:54 am on Dec 15, 2004 (gmt 0)

I'd like to have my table cells centered by default, but have the ability to override certain cells and align them on the left. But in the following code the override doesn't work, and all the cells are centered.

.mytable TD { text-align:center;}
.left {text-align:center;}
.left TD {text-align:center;}

<TABLE class=mytable><TR>
<TD class=left>Boo boo puppy</TD>
<TD>Blah blah blah></TD>
</TR></TABLE>

I tried one or the other of the .left definitions, but neither one works. Any ideas? Thanks a bunch...

benihana

9:55 am on Dec 15, 2004 (gmt 0)

is it a typo?

all your text-aligns are set to center.

victor

9:56 am on Dec 15, 2004 (gmt 0)

Try

.left {text-align:left;}

MichaelBluejay

2:19 pm on Dec 15, 2004 (gmt 0)

Yes, it was a typo. D'oh! Here's the complete code for my test page. I want the first cell to default to center alignment, and the second cell to override the default and align left. But both cells center.

[b]

[pre]<HTML><HEAD><STYLE type="text/css">
.mytable TD { text-align:center;} 
.left {text-align:left;} 
.left TD {text-align:left;} 
</STYLE></HEAD><BODY>
<TABLE class=mytable border=1 width=300><TR> 
<TD>Boo boo puppy</TD> 
<TD class=left>Blah blah blah</TD> 
</TR></TABLE></BODY></HTML>[/b][/pre]

benihana

2:25 pm on Dec 15, 2004 (gmt 0)

you can delete :

.left {text-align:left;}

and change:

.left TD {text-align:left;}

to:

TD.left {text-align:left;}

that should do it.

choster

2:34 pm on Dec 15, 2004 (gmt 0)

There are a couple of things to watch for. First, when you specify

.left TD {text-align:left;}

you are instructing the browser to left-align any td elements inside an element in the "left" class.

Second, the specificity of the first rule is giving it precedence over the second -- see [w3.org...] for the standard.

Try

.mytable td {text-align:center;}
td.left {text-align:left;}

or depending on what you are trying to do,

.mytable td {text-align:center;}
.mytable .left {text-align:left;}

Span

2:41 pm on Dec 15, 2004 (gmt 0)

You have to use the same selectors when you want to override a previously declared style.

.mytable TD {text-align:center;}
.mytable TD.left {text-align:left;}

<table class="mytable" border="1" width="300">
<tr>
<td>Boo boo puppy</td>
<td class="left">Blah blah blah</td>
</tr>
</table>

MichaelBluejay

5:22 pm on Dec 15, 2004 (gmt 0)

.mytable TD.left {text-align:left;}

That took care of it, thanks!

Guess I need to read up on selectors and dot notation and stuff...