Avatar billede Dazzle Novice
31. maj 2005 - 11:37 Der er 15 kommentarer

CSS - Skftevis farve på celler

Hej

Jeg skal ha lavet en tabel, hvor hver anden række skal ha en anderledes baggrundsfarve end de andre.. F.eks. Rød-Hvid-Rød-Hvid-Rød etc. Findes der en smart kommando i CSS hvor man lave sådan et lille trick?
Avatar billede olebole Juniormester
31. maj 2005 - 11:39 #1
<ole>

Nej, ikke umiddelbart. Normalt laves det i et loop på serveren, når man laver dynamiske tabeller

/mvh
</bole>
Avatar billede busschou Praktikant
31. maj 2005 - 11:40 #2
du kan jo give hver anden række hvert sit id
<table>
<tr id="grøn"><td></td></tr>
<tr id="blå"><td></td></tr>
</table>
og så style dem i stylesheetet
Avatar billede olebole Juniormester
31. maj 2005 - 11:43 #3
- eller lidt slankere:

<style type="text/css">
.myTbl tr {
    background-color: yellow;
}
.myTbl .even {
    background-color: red;
}
</style>

<table class="myTbl" cellspacing="0" cellpadding="0" border="0">
<tr>
    <td>klkæl kælk ælk</td>
</tr>
<tr class="even">
    <td>klkæl kælk ælk</td>
</tr>
<tr>
    <td>klkæl kælk ælk</td>
</tr>
<tr class="even">
    <td>klkæl kælk ælk</td>
</tr>
</table>
Avatar billede olebole Juniormester
31. maj 2005 - 11:44 #4
busschou >> ID'er er nok ikke en god idé. Skal det være noget, skal det være klasser  ;o)
Avatar billede schwarz84 Nybegynder
31. maj 2005 - 12:39 #5
I øvrigt er "grøn" og "blå" rigtigt dårlige navne. Når bedazzled om et halvt år bestemmer sig for at farverne skal være gul og rød i stedet så skal han til at lave om i alle tabellerne for at hans klassenavne giver mening. Ellers vil det være noget rigtigt rod.
Avatar billede olebole Juniormester
31. maj 2005 - 21:16 #6
- skrev schwarz!  ;D

Undskyld, jeg kunne ikke lade være ... men jeg er i øvrigt helt enig. Det bringer os fuldstændig på linie med W3C - og det er jo altid ganske betryggende  :)
Avatar billede busschou Praktikant
31. maj 2005 - 21:20 #7
hmm nu var mit eksempel så bare et eksempel for at illustrere hvordan man kunne gøre, ikke hvordan man partout skulle gøre :o)
Men jeg tager det da gerne i mig igen ;o)
Avatar billede roenving Novice
04. juni 2005 - 14:28 #8
-- og en custom udvidelse af oles opbygning er:

<style type="text/css">
.myTbl tr {
    background-color: yellow;
    cursor:pointer;
}
.myTbl .even {
    background-color: red;
}
</style>

<table class="myTbl" cellspacing="0" cellpadding="0" border="0">
<tr onmouseover="st=this.style;st.backgroundColor='#333';st.color='white';" onmouseout="st=this.style;st.backgroundColor='';st.color='';">
    <td>klkæl kælk ælk</td>
</tr>
<tr class="even" onmouseover="st=this.style;st.backgroundColor='#333';st.color='white';" onmouseout="st=this.style;st.backgroundColor='';st.color='';">
    <td>klkæl kælk ælk</td>
</tr>
<tr onmouseover="st=this.style;st.backgroundColor='#333';st.color='white';" onmouseout="st=this.style;st.backgroundColor='';st.color='';">
    <td>klkæl kælk ælk</td>
</tr>
<tr class="even" onmouseover="st=this.style;st.backgroundColor='#333';st.color='white';" onmouseout="st=this.style;st.backgroundColor='';st.color='';">
    <td>klkæl kælk ælk</td>
</tr>
</table>
Avatar billede hrlaust Nybegynder
05. juni 2005 - 00:54 #9
hmm, jeg kunne godt tænkte mig at se hvordan man laver hver anden en farve igennem en loop,med fx asp :D hvis det kunne lade sig gøre :)
Avatar billede roenving Novice
05. juni 2005 - 03:16 #10
Det gør du ved at sætte den der even-class på !-)
Avatar billede olebole Juniormester
05. juni 2005 - 03:19 #11
Hvis du i loop'et samtidig tæller en variabel op fra 0, kan du jo spørge på resten, når du dividerer med 2. I JavaScript hedder det noget à la:
    if (i%2) ELEMENT.style.backgroundColor = "red";
    else ELEMENT.style.backgroundColor = "blue";

I VBS kan du bruge:

If bla Mod 2 Then
  ELEMENT.style.backgroundColor = "red";
Else
  ELEMENT.style.backgroundColor = "blue";
end if
Avatar billede roenving Novice
05. juni 2005 - 04:09 #12
-- jeg ville nu nok gå efter class-løsningen ...
Avatar billede hrlaust Nybegynder
05. juni 2005 - 12:23 #13
tusind tak, ærveligt jeg ikke kan gide point :)
Avatar billede roenving Novice
08. juni 2005 - 02:25 #14
Hvem vil du give pointene ?-)

-- og der er endnu ikke nogen, som har kommenteret at busschous idé er rigtig dårlig på flere leder:

-- det er ulovligt at give mere end eet element et givet id ...

-- og så man forøvrigt ikke bruge f.eks. æøå i id'er ...
Avatar billede busschou Praktikant
22. juni 2005 - 15:57 #15
roenving >> skal jeg på knæ for dig.. har jo taget det i mig ;o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester