how can CSS styles be aplied on different TRs of a table?

eantoranz · 03-29-2005, 08:16 AM

I'm working on a WEB Application. I have to apply different styles to different rows of a table. Haw can that be achieved?

Code:

<tr class="style1">
  <td>Style 1</td>
  <td>blah</td>
</tr>
<tr class="style2">
  <td>Style 2</td>
  <td>blah</td>
</tr>
<tr class="style1">
  <td>Style 1 <b>again</b></td>
  <td>blah</td>
</tr>

How do I have to define those two styles in the CSS?

ror · 03-29-2005, 08:21 AM

The same way you'd set rules for any class in CSS, with .style1 etc

keefaz · 03-29-2005, 09:08 AM

Also some browsers like Safari (from Apple) just won't take in account tr's styles

eantoranz · 03-29-2005, 09:11 AM

But I've given it some tries and it doesn't work. :'(

I'll give you a list:
#style1 {}
#table.style1 {}
#tr.style1 {}

None of them worked. What am I missing?

keefaz · 03-29-2005, 09:19 AM

With no visual values, how do you know that it does not work in your browser ?
try something like

Code:

style1 { background-color: blue; color: white;}
table.style1 {background-color: red; color: yellow;}
tr.style1 {background-color: white; color: black;}

eantoranz · 03-29-2005, 09:32 AM

I mean.. those are the ones I tried (with visual values) LOL.

color and background-color.

Let me give yours a try anyway. Will write back after I give it a try.

eantoranz · 03-29-2005, 09:41 AM

Nope... none of them worked. What could I be missing?

keefaz · 03-29-2005, 09:49 AM

What is your browser ?

okmyx · 03-29-2005, 10:17 AM

You probably need to apply the styles to the td's rather than the tr's. tr's don't have any font/colour attributes linked to them probably only border and padding attributes.

eantoranz · 03-29-2005, 12:37 PM

Mozilla

That makes sense. I'll try with the TDs (though it's a longer pain in the ass :'().

Tell you about it in a minute.

eantoranz · 03-29-2005, 12:48 PM

Nope... nothing.

I have now:
#style1
#table.style1
#td.style1
#style1.td

All with different styles (just in case). None works.

eantoranz · 03-29-2005, 01:03 PM

Partial solution:

I have to set the id of the table.

Code:

<table id="aID">
  <tr>
    <td class="style1">Blah!</td>
  </tr>
</table>

and the style sheet says:

Code:

#aID td.style1 {}

Let me try with tr. Will tell you in a while (I have to go eat some birthday cake RIGHT NOW!!!!)

eantoranz · 03-29-2005, 01:24 PM

It works at the tr level too.

That will make a solution.... however, you think there's a way to do it without setting the tables ID?

keefaz · 03-29-2005, 01:41 PM

For my part, due to browser incompatibility reason I avoid using style in trs

But this should work with mozilla :

Code:

<table>
  <tr class="style1">
    <td>Blah!</td>
  </tr>
</table>

witth style1 like

Code:

tr.style1 { background-color: red; }

eantoranz · 03-29-2005, 01:47 PM

Will give it another shot later. Tell you about the results when I do... but don't hold your breath, cause I'm working on something else right now.