Web-Tor Medlem sedan nov. 2000 13 890 inlägg Frågan 25 okt. 2005 14:40 #1 Jag har en tabell som ser ut ungefär så här:
<table class="list" border="1">
<tr class="head">
<td colspan="2">Heading 1</td>
</tr>
<tr>
<td><b>Importer</b></td>
<td>Importer name</td>
</tr>
<tr>
<td><b>Dealer</b></td>
<td>Dealer name</td>
</tr>
<tr class="head">
<td colspan="2">Heading 2</td>
</tr>
<tr>
<td><b>Delivering importer</b></td>
<td>Delivering importer name</td>
</tr>
<tr>
<td><b>Delivering dealer</b></td>
<td>Delivering dealer name</td>
</tr>
<tr class="head">
<td colspan="2">Heading 3</td>
</tr>
<tr>
<td><b>Shipping importer</b></td>
<td>Shipping importer name</td>
</tr>
<tr>
<td><b>Shipping dealer</b></td>
<td>Shipping dealer name</td>
</tr>
</table>
Finns det något sätt att med CSS komma åt cellerna med "Heading 2" och "Heading 3" och t.ex. ändra bakgrundfärg? Jag vill alltså hitta alla celler som har classen "head" förutom den som ligger överst i classen "list".
Jag vill inte lägga någon egen class på cellerna och det måste funka in Explorer 5.5+.
Z zcorpan Medlem sedan dec. 2004 2 245 inlägg Först så skulle jag vilja finslipa tabellen lite:
<table class="list">
<tbody>
<tr>
<th scope="col" colspan="2">Heading 1</td>
</tr>
<tr>
<th scope="row">Importer</th>
<td>Importer name</td>
</tr>
<tr>
<th scope="row">Dealer</th>
<td>Dealer name</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="col" colspan="2">Heading 2</th>
</tr>
<tr>
<th scope="row">Delivering importer</th>
<td>Delivering importer name</td>
</tr>
<tr>
<th scope="row">Delivering dealer</th>
<td>Delivering dealer name</td>
</tr>
</tbody>
<tbody>
<tr>
<th scope="col" colspan="2">Heading 3</th>
</tr>
<tr>
<th scope="row">Shipping importer</th>
<td>Shipping importer name</td>
</tr>
<tr>
<th scope="row">Shipping dealer</th>
<td>Shipping dealer name</td>
</tr>
</tbody>
</table>
Sen kan man använda föjlande CSS:
.list { border:thin outset; }
.list th,
.list td { border:thin inset; }
.list th { text-align:left; }
.list th[scope=col] { font-weight:normal; background:lime; }
.list tbody:first-child th[scope=col] { background:transparent; }
...men om det ska funka i IE så får du nog använda class="" eftersom den webbläsaren har så dåligt stöd för selektorer, eller på nåt sätt lösa det med javascript. :)
Web-Tor Medlem sedan nov. 2000 13 890 inlägg Ja, funkar det inte inte i IE5.5+ så hjälper det tyvärr inte mig ett skit. ;)
Z zcorpan Medlem sedan dec. 2004 2 245 inlägg Kanske Dean Edwards IE7 kan vara till nytta?
O Orient Medlem sedan sep. 2005 54 inlägg Kan du inte bara kopiera "head" classen och döpa om det till "head2" resp. "head3" och ändra bakgrundsfärgen i varje class till det du ville ha?
<tr class="head">
Bara en tanke.. är ingen expert på det här måste jag säga.
Web-Tor Medlem sedan nov. 2000 13 890 inlägg
Orient skrev:
Kan du inte bara kopiera "head" classen och döpa om det till "head2" resp. "head3" och ändra bakgrundsfärgen i varje class till det du ville ha?
<tr class="head">
Bara en tanke.. är ingen expert på det här måste jag säga.
Jag vill egentligen behålla min HTML-kod precis som den är och bara ändra i CSS:en. Men det ser mörkt ut. :(
Z zcorpan Medlem sedan dec. 2004 2 245 inlägg Ja, du blir nog tvungen att använda javascript.
<style type="text/css">
.list .head { background:lime; }
.list .first { background:transparent; }
</style>
<script type="text/javascript">
window.onload = function() {
var tables = document.getElementsByTagName("TABLE");
for (var i = 0, len = tables.length; i < len; ++i) {
var t = tables[i];
if (t.className == "list") {
t.getElementsByTagName("TR")[0].className += " first";
}
}
}
</script>
