First row bg color

admin

Administrator
Staff member
Hello,

I have a table with classes. I can't cange the table source. I can manage a lot with a external ccs file, but I want the first row in another bgcolor. But one the first row.

Here's the table:<table class="maatveldtabel" cellpadding="3" width="75%" id="AutoNumber1" cellspacing="0">
<tr class="celleigenschappen">
<td class="celleigenschappen" width="16%"><b>Lengte</b></td><br>
<td class="celleigenschappen" width="16%"><b>Diameter</b></td><br>
<td class="celleigenschappen" width="16%"><b>Trekkracht</b></td><br>
<td class="celleigenschappen" width="16%"><b>Kleur</b></td><br>
</tr><br>
<tr class="celleigenschappen"><br>
<td class="celleigenschappen" width="16%">100 m</td><br>
<td class="celleigenschappen" width="16%">0.11 mm</td><br>
<td class="celleigenschappen" width="16%">9.1 kg</td><br>
<td class="celleigenschappen" width="16%">Zwart</td><br>
</tr><br>
</table>
And this is a part of my css file:.maatveldtabel
{
border-style:solid;
border-width:1px;
border-collapse:collapse;
border-left-color:#004E90;
border-right-color:#004E90;
border-top-color:#000000;
border-bottom-color:#000000;
font-family:Bookman Old Style; color: #A09B48;
font-size: 10pt;
}

.celleigenschappen
{
border-style:solid;
border-width:1px;
border-collapse:collapse;
border-left-color:#004E90;
border-right-color:#004E90;
border-top-color:#000000;
border-bottom-color:#000000;
font-family:Bookman Old Style; color: #A09B48;
font-size: 10pt;
}
Is it possible an can you help me with it? Thanks a lot!table.maatveldtabel > tr:first-child {background-color: #cff;}

However, if I'm not mistaken, IE6 does not support the first-child pseudo-class, but it might be worth a try.Nope it doesn't work! Any other solutions?

ThanksFor supporting browsers:#AutoNumber1 tr:first-child {background-color: #cff;}
For others a JavaScript:onload=function() {document.getElementById('AutoNumber1').getElementsByTagName('tr')[0].style.backgroundColor='#cff';};(No <br> between <tr> or <td> tags, please.)
You could wrap the first row in a thead:<table class="maatveldtabel" cellpadding="3" width="75%" id="AutoNumber1" cellspacing="0">
<thead>
<tr class="celleigenschappen">
<td class="celleigenschappen" width="16%">Lengte</td>
<td class="celleigenschappen" width="16%">Diameter</td>
<td class="celleigenschappen" width="16%">Trekkracht</td>
<td class="celleigenschappen" width="16%">Kleur</td>
</tr></thead>
<tr class="celleigenschappen">
<td class="celleigenschappen" width="16%">100 m</td>
<td class="celleigenschappen" width="16%">0.11 mm</td>
<td class="celleigenschappen" width="16%">9.1 kg</td>
<td class="celleigenschappen" width="16%">Zwart</td>
</tr>
</table>

CSS:

.celleigenschappen thead tr {
background-color: Whatever_you_want;
}
.celleigenschappen thead td {
font-weight: bold;
}And you could move the 16% width to CSS, too.Orc Scorcher note for your solution:
204 wrote
I can't cange the table sourceyeah this will work but I can NOT change the table. Only the css file. So this is not a solution...Sorry, I overlooked that sentence. How about this: tr.celleigenschappen:first-child {
background-color: red;
}
/* For IE: */
#AutoNumber1 {
left: expression(AutoNumber1.rows[0].style.backgroundColor = "red", "auto")
}It works excellent! Thanks a lot! That's what I needed.

Cheers!
 
Back
Top