[css] verschillende table styles.

[Alarmnummer]

Ik wil meerdere table styles in mijn css maken. Ik kan eigenschappen voor alle tabellen tegelijk instellen, door in de css eigenschappen voor de onderdelen in te stellen. Maar nu heb je maar beschikking over 1 table.

Ik kan ook het volgende doen:

code:

.table-topic{
    border-spacing: 10pt
}

.table-topic-title{
    color: #ffffff;
    background: #66ccff;
    vertical-align: top;
    text-align: center;
    padding: 7px;
}

.table-topic-content{
    background: #eeeeee;
    color: #666666;
}

Maar nu moet ik bij iedere onderdeel van de table een class instellen. Op zich is dat niet zo`n probleem, want tis een eenmalige aanpassing in de xslt, maar ik ben er niet tevreden mee.

Ik wil dus tegen een table zeggen dat hij van een bepaalde class is, en dat automatisch voor alle subonderdelen ook de juiste eigenschappen in worden gesteld. Is dit mogelijk in css?

[edit]
zie http://www.alarmnummer.net en dan stylesheet example.

[ Voor 4% gewijzigd door Alarmnummer op 27-02-2003 13:18 ]

[Hangloozz]

code:

TABLE.table-topic-title, TABLE.table-topic-title td{
    color: #ffffff;
    background: #66ccff;
    vertical-align: top;
    text-align: center;
    padding: 7px;
}

[Alarmnummer]

Dit is niet wat ik bedoel. Nu is er geen visueel verschil tussen een table-topic-title en table-topic-content.

Ik wil dus in die css zeggen dan bepaalde eigenschappen bij een andere eigenschap horen. Stel dat ik een table maak van de class table-topic, dan moet automatisch de 1e column blauw worden, en de anderen grijs.


Maar als ik een table heb van de class 'standaard' dan moet de bovenste row rod worden, de 1e column blauw en de rest grijs.

Ik hoop dat het zo iets duidelijker is.

[ Voor 15% gewijzigd door Alarmnummer op 27-02-2003 13:29 ]

[Willem]

Nee niet echt en ik heb sterk de indruk dat je nog niet helemaal doorhebt hoe je het hoogste rendement kunt halen uit functioneel CSS gebruik.

Dat is iets wat ik niet zie in je CSS

[Verwijderd]

Om het simpel te jouden zal je met selectors moeten werken en dat gaat in IE maar heel beperkt.

HTML:

.tableblauw>td {

}

.tablegrijs>td {

}

Ideaal voor jouw probleem, gaat echter niet werken in IE.

[Alarmnummer]

Dit werkt wel.

code:

table.table-topic table{
    border-spacing: 30pt
    color: #aaaaaa;
}

table.table-topic tr{
    color: #ffffff;
    background: #66ccff;
    vertical-align: top;
    text-align: center;
    padding: 7px;
}

table.table-topic td{
    background: #eeeeee;
    color: #666666;
}

[Alarmnummer]

willem169 schreef op 27 February 2003 @ 13:31:
Nee niet echt en ik heb sterk de indruk dat je nog niet helemaal doorhebt hoe je het hoogste rendement kunt halen uit functioneel CSS gebruik.

Dat is iets wat ik niet zie in je CSS

Dat zou heel goed kunnen, ik ben ook geen webdeveloper. Ik ben maar een armzalige programmeur die probeert iets van zijn homepage te maken

[Rickets]

Ik weet zo gauw geen oplossing voor je probleem, maar ik wil toch even een off-topic notie maken
In je source zag ik het volgende staan.

HTML:

<tr class="cell" class="table">

Dat is niet correct. Slechts één class-attribuut is nodig.

HTML:

<tr class="cell table">

Je kan dus meerdere classes opgeven met 1 attribuut, als je ze maar scheidt door middel van een spatie

[Verwijderd]

Nog een deze is beter

HTML:

<style type="text/css">
table td {
    background-color: #000;
}
table tr>td:first-child { 
    background-color: #999; 
}
</style>

[crisp]

alles over selectors (en IE gebruikers hebben dan maar gewoon pech zullen we maar zeggen )

[Verwijderd]

lol! en je kan ook hover gebruiken die alleen op de erste rij werkt image swap in CSS. daaaag javascript

[Alarmnummer]

Rickets schreef op 27 February 2003 @ 13:45:
Ik weet zo gauw geen oplossing voor je probleem, maar ik wil toch even een off-topic notie maken
In je source zag ik het volgende staan.

HTML:

<tr class="cell" class="table">

Dat is niet correct. Slechts één class-attribuut is nodig.

HTML:

<tr class="cell table">

Je kan dus meerdere classes opgeven met 1 attribuut, als je ze maar scheidt door middel van een spatie

Dat is een foutje Ik weet dat een element niet 2 keer hetzelfde attribuut mag hebben.

En verder werkt het onder ie uitstekend:

dit is wat ik nu heb:

code:

table.standard-table table{
    border-spacing: 10pt;
}

table.standard-table th{
    color:  #ffffff;
    background: #cc6666;
    vertical-align: top;
    padding: 7px;
}

table.standard-table td{
    background: #eeeeee;
    color: #666666;
}

table.table-topic table{
    border-spacing: 30pt
    color: #aaaaaa;
}

table.table-topic th{
    color: #111111;
    background: #111111;
    vertical-align: top;
    text-align: center;
    padding: 7px;
}

table.table-topic td{
    background: #eeeeee;
    color: #666666;
}

[ Voor 60% gewijzigd door Alarmnummer op 27-02-2003 14:00 ]

[Alarmnummer]

Is het ook mogelijk om in een stylesheet aan te geven dat de 1e column een andere kleur moet hebben? Ik kan natuurlijk de class van de cellen uit de 1e column gaan instellen, maar kan het niet vanuit de css geregeld worden?

[Rickets]

Alarmnummer schreef op 27 februari 2003 @ 22:31:
Is het ook mogelijk om in een stylesheet aan te geven dat de 1e column een andere kleur moet hebben? Ik kan natuurlijk de class van de cellen uit de 1e column gaan instellen, maar kan het niet vanuit de css geregeld worden?

Dit kan je doen met het volgende:

HTML:

table tr>td:first-child { 
    background-color: #999; 
}

Dan selecteer je alle eerste td's binnen iedere tr. Shadow3333 gaf het al aan.

Het wordt al ondersteund door Mozilla, IE weigert het. Dus als je het crossbrowser wilt hebben, moet je het voorlopig met classes oplossen, denk ik

[Woudloper]

Alarmnummer schreef op 27 February 2003 @ 22:31:
Is het ook mogelijk om in een stylesheet aan te geven dat de 1e column een andere kleur moet hebben? Ik kan natuurlijk de class van de cellen uit de 1e column gaan instellen, maar kan het niet vanuit de css geregeld worden?

De oplossing hierboven kan natuurlijk ook. Zelf doe ik altijd het volgende:

HTML:

<table>
 <colgroup>
   <col class="column_a" width="75" />
   <col class="column_b" width="285" />
 </colgroup>
<tbody>
<tr>
 <td>eerste kolom</td>
 <td>tweede kolom</td>
</tr>
</tbody>
</table>

De rest spreekt denk ik wel voor zich. In je stylesheet hoef je dan alleen nog de specifieke details voor ofwel column_a ofwel column_b op te geven...

[Alarmnummer]

Ik zal er straks eens mee spelen. En als ik het niet voor elkaar krijg, dan bouw ik gewoon een xml/xslt systeem om tables mee te genereren. Alleen krijg ik dus een extra tussenstap. xml->xml->html