Avatar billede neoman Novice
29. april 2007 - 22:55 Der er 5 kommentarer og
2 løsninger

Ændring af cellefarve i tabel ved hjælp af klasser

Jeg har en tabel med følgende CSS:

table.sample {
    border-width: 1px 1px 1px 1px;
    border-spacing: 1px;
    border-style: solid solid solid solid;
    border-color: black black black black;
    border-collapse:collapse;
    background-color: white;
    text-align:center;
    font-size:7pt;
    font-family:Verdana;
}
table.sample th {
    border-width: 1px 1px 1px 1px;
    padding: 1px 1px 1px 1px;
    border-collapse:collapse;
    border-style: solid solid solid solid;
    border-color: white white white white;
    background-color: rgb(211, 211, 211);
    -moz-border-radius: 0px 0px 0px 0px;
}
table.sample td {
    border-width: 1px 1px 1px 1px;
    padding: 1px 1px 1px 1px;
    border-collapse:collapse;
    border-style: solid solid solid solid;
    border-color: white white white white;
    background-color: rgb(211, 211, 211);
    -moz-border-radius: 0px 0px 0px 0px;   
}

Efter at have lavet tabellen (på serveren i ASP.NET, inden rendering til klienten), så løber jeg igennem cellerne, og nogle celler skal have en anden farve - jeg har tre forskellige farver.

Jeg er ny i CSS, så bær over med mig:)

Min tanke er at de pågældende celler så havner i en ny klasse, f.eks.

.CellColorBlue
{
background-color:Blue;
}
.CellColorRed
{
background-color:Red;
}
.CellColorGray
{
background-color:Gray;
}

Kan de andre TD- egenskaber nedarves på nogen måde ? Hvis ja , hvordan skal dette skrives ? Hvis nej, så skal jeg vel tage alle de andre egenskaber, som jeg har listet i table.sample td og gentage dem i min .CellColorRed .. osv?
Avatar billede dkfire Nybegynder
29. april 2007 - 23:40 #1
Der er lige et par ting som kna ændres:
border-width, border-style og border-color skal ikke have 4 inputs, kun 1. ¨

Har aldrig hørt om noget der hedder -moz-border-radius.

Ang. dit spørgsmål, hvis du har en tabel med class=sample, vil dennes td have de egenskaber du giver dem. Du kan derefter sagtens have at hver td har en class med farver og de vil stadig have de egenskaber som de fik fra table.sample td.

Håber du var forståeligt.
Avatar billede neoman Novice
29. april 2007 - 23:50 #2
1. 4 vs. 1 det er vistnoget som den CSS-generator jeg fandt på nettet lavede , og det virker, så det ændrer jeg ikke sådan bare lige
2. - moz-border  er noget Netscape halløj som den også laver - no problems der

3. Det besvarer ikke mit spørgsmål: Hvordan skriver jeg det i css filen og hvad hedder klassen så?

Jeg har prøvet

table.sample .CellColorRed td {background_color: red;}

og i min kode sat CssClass="sample.CellColorRed"  men det virker ikke  -cellerne har stadig den oprindelige farve defineret i table.sample TD
Avatar billede neoman Novice
30. april 2007 - 00:28 #3
og efter at have prøvet alle permutationer, blev svaret som følger :
table.sample  td.red
{
    background-color:rgb(111, 111, 111);
}

og CssClass="red"  (selv om den afbildede farve nu er grå, men pyt :)

dkfire tak for hjælpen. Læg et svar, jeg vil dele points med dig, siden du bekræftede at man kunne arve, men jeg fandt løsningen selv.
Avatar billede dkfire Nybegynder
30. april 2007 - 09:41 #4
Du kunne også bare have lavet:
td.red {
bla bla
}

og class="red" i din td
det ville også have virket. Den vil stadig have arvet egenskaberne fra tabellens class. :-)
Hvis du skal validere din css fil på et tidspunkt, tror jeg ikke at punkt 1 og 2 vil gå igennem.
Avatar billede dkfire Nybegynder
30. april 2007 - 09:41 #5
hov
Avatar billede neoman Novice
30. april 2007 - 11:22 #6
Din løsning prøvede jeg også - men den virkede ikke (kan være, at jeg stavede noget forkert dog, i kampens hede) :)
Den med 4 x border-width osv. er blot en kopi af hvad min style-generator i visual studio selv laver,og det lader til at virke som det skal (hvor jeg faktisk kan ændre een af siderne og ændringen slår igennem).
Avatar billede roenving Novice
30. april 2007 - 13:36 #7
På bokse findes der i css flere muligheder for at angive de forskellige siders properties ...

Ved at angive een værdi, gælder det for alle 4 sider ...

Angiver man to, gælder den første top og bund, den anden højre og venstre side ...

Er man på 3, vil den første gælde top, den anden højre og venstre side, mens den sidste gælder bund ...

4 værdier vil gælde i denne rækkefølge: top, højre, bund og venstre (tænk f.eks. på det, som med uret !-)

I øvrigt findes der også en række shorthands, som kan sætte flere properties på en over-property, så f.eks. th-reglen kan forkortes en hel del:

table.sample th {
    border: 1px solid white;
    padding: 1px;
    border-collapse:collapse;
    background-color: rgb(211, 211, 211);
    -moz-border-radius: 0;
}
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