[css] text-align op een <col>

[Verwijderd]

Ik wil graag in een tabel enkele kolommen markeren dat ze numerieke data bevatten (en vervolgens de text rechts uitlijnen)

Cascading Stylesheet:

col.numeric {
  text-align: right;
}

HTML:

<table>
<colgroup>
<col />
<col class="numeric" />
<col />
</colgroup>
<tbody>
..etc
</tbody>
</table>

uit de css specs haal ik dat het text-align prop alleen voor blockelementen is, en dat is een col natuurlijk niet. Aan de andere kant is een td dat ook niet en daar werkt ie ook op.

Iemand een idee hoe ik dit (netjes) op kan lossen?

[ Voor 11% gewijzigd door Verwijderd op 24-08-2004 12:11 ]

[crisp]

ik heb slechte ervaringen met het toepassen van styles op col-elementen; het werkt vaak niet of maar half...

[Verwijderd]

dat is mijn ervaring nu dus ook, display: block toevoegen aan de col is geen oplossing, en ik voel er eigenlijk ook niet zoveel voor om elke cell aan te geven als zijnde numeriek

!important is ook geen oplossing...

[ Voor 10% gewijzigd door Verwijderd op 24-08-2004 12:17 ]

[BtM909]

Grappige is dat de O'REILLY Reference het volgende zegt:

The col element provides shortcuts to assigning widths and other ... styles to one or more subsets of columns within a table...

edit:

Dit werkt gewoon bij mij hoor

code:

col.numeric{
    text-align: right;
    width: 200px;
}

[ Voor 25% gewijzigd door BtM909 op 24-08-2004 12:22 ]

[crisp]

BtM909: en zet er eens een table omheen met verschillende THEAD en TBODY secties, en check het dan eens in verschillende browsers

Theorie is leuk, maar de praktijk heeft mij geleerd dat col in geen enkele browser goed geimplementeerd is.

[ Voor 32% gewijzigd door crisp op 24-08-2004 12:27 ]

[Verwijderd]

ik was alleen aan het testen in ff, in ie werkt het inderdaad gewoon, qua tabellen heeft ff dus nog wat te leren

(hij vind ook de border-rights van td's belangrijker dan de border-top van een table, dus zitten er witte gaps in m'n border-top, iets wat imho niet zou moeten)

[BtM909]

crisp schreef op 24 augustus 2004 @ 12:26:
BtM909: en zet er eens een table omheen met verschillende THEAD en TBODY secties, en check het dan eens in verschillende browsers

Ja hallo... Dat was niet het voorbeeld van mophor

[Verwijderd]

dan ook doet ie het overigens goed in ie, ik heb als voorbeeld even een makkelijke tabel gedaan, m'n eigenlijke tabel was:

HTML:

<table> 
  <caption>
   Inschrijvingsvorm 
  </caption> 
  <colgroup> 
  <col /> 
  <col /> 
  <col /> 
  <col class="numeric" /> 
  <col /> 
  <col /> 
  </colgroup> 
  <thead> 
    <tr> 
      <th></th> 
      <th scope="col">Student Voltijds</th> 
      <th scope="col">Student Duaal<sup>1</sup></th> 
      <th scope="col">Student Deeltijds</th> 
      <th scope="col">Extraneus</th> 
      <th scope="col">Contractant</th> 
    </tr> 
  </thead> 
  <tfoot> 
    <tr> 
      <th scope="row">totaal</th> 
      <td>636</td> 
      <td>3633</td> 
      <td>366</td> 
      <td>897</td> 
      <td>7667</td> 
    </tr> 
  </tfoot> 
  <tbody> 
    <tr> 
      <th scope="rowgroup">Voorwaarden</th> 
      <th colspan="5"></th> 
    </tr> 
    <tr> 
      <th scope="row">vooropleidingseisen</th> 
      <td>vereist</td> 
      <td>vereist</td> 
      <td>vereist</td> 
      <td>vereist</td> 
      <td>-</td> 
    </tr> 
    <tr> 
      <th scope="row">college-/examengeld</th> 
      <td>€ 1476,-</td> 
      <td>€ 1476,-</td> 
      <td>€ 984 of 1476,- <sup>2</sup></td> 
      <td>€ 738</td> 
      <td>€ 250 <sup>3</sup></td> 
    </tr> 
    <tr> 
      <th scope="row">Toestemming CvB</th> 
      <td colspan="3">alleen na 1 oktober</td> 
      <td>-</td> 
      <td>-</td> 
    </tr> 
  </tbody> 
  <tbody> 
    <tr> 
      <th scope="rowgroup">Rechten</th> 
      <th colspan="5"></th> 
    </tr> 
    <tr> 
      <th scope="row">Volgen van onderwijs</th> 
      <td>ja</td> 
      <td>ja</td> 
      <td>ja</td> 
      <td>nee</td> 
      <td>ja (beperkt)</td> 
    </tr> 
    <tr> 
      <th scope="row">Afleggen examens (zie boven)</th> 
      <td>ja</td> 
      <td>ja</td> 
      <td>ja</td> 
      <td>ja</td> 
      <td>nee</td> 
    </tr> 
    <tr> 
      <th scope="row">gebruik studentenvoorzieningen</th> 
      <td>ja</td> 
      <td>ja</td> 
      <td>ja</td> 
      <td>nee</td> 
      <td>nee</td> 
    </tr> 
    <tr> 
      <th scope="row">studiebegeleiding</th> 
      <td>ja</td> 
      <td>ja</td> 
      <td>ja</td> 
      <td>nee</td> 
      <td>nee</td> 
    </tr> 
    <tr> 
      <th scope="row">studiefinanciering</th> 
      <td>ja</td> 
      <td>ja</td> 
      <td>nee</td> 
      <td>nee</td> 
      <td>nee</td> 
    </tr> 
    <tr> 
      <th scope="row">actief en passief kiesrecht voor universiteits- en faculteitsraad</th> 
      <td>ja</td> 
      <td>ja</td> 
      <td>ja</td> 
      <td>nee</td> 
      <td>nee</td> 
    </tr> 
  </tbody> 
</table>

[Woudloper]

Verwijderd schreef op 24 augustus 2004 @ 12:38:
dan ook doet ie het overigens goed in ie [..]

Ja, dat klopt. Naar mijn idee gaat het gewoon goed zolang je niet overgaat tot het nesten van tabellen, want dan gaat het minder werken. En als ik goed begreep, is dat ook wat crisp bedoelde....

[Verwijderd]

'text-align' is niet toegestaan op COL. Dat IE het wel ondersteund betekent alleen maar dat de browser nogal brak is.

The mystery of why only four properties apply to table columns. Als je een oplossing voor het probleem weet: mail www-style.

[Verwijderd]

ok, dat klinkt allemaal wel logisch. Dan gaan we lekker discussieren over een oplossing

HTML:

<table>
<colgroup>
  <col>
    <td />
    <td />
  </col>
  <col>
    <td />
    <td />
  </col>
</colgroup>
<tbody>
  <tr />
  <tr />
</tbody>
</table>

draait het probleem alleen maar om natuurlijk, dan zit je met de rijdefinities, achtergrondkleuren enzo zouden hier best van pas komen. Maar zou je niet meer gemeenschappelijke dingen in een kolom hebben dan in een rij?

overigens is rowgroup niet een logischere naam dan tbody? (en dan ook row ipv tr)

[ Voor 29% gewijzigd door Verwijderd op 24-08-2004 18:53 ]

[Verwijderd]

De leukste oplossing zit in CSS3 (':nth-child' e.d., ook ondersteund door het IE7 project geloof ik). Voor de rest zit er niks anders op dan het CLASS attribuut weer van stal te halen.

Geen idee waarom ze voor TBODY gekozen hebben. Ik weet wel dat die T ervoor gezet is (net als deze gezet is voor elk tabel element) om te zorgen dat er geen verwarring heerst met de rest van de HTML specificatie en zodat er geen twee elementen met dezelfde naam, maar met een andere semantische waarde zijn. (Die waarde zou dan afhangen van de locatie in het document. Zo zou 'html>body' een andere waarde hebben dan 'table>body', terwijl het toch over hetzelfde element BODY gaat, in schrijfwijze dan.)

[Verwijderd]

zat ik ook al aan te denken (die nth-child()), maar gaat fout op het moment dat er ergens colspans tussen zitten.

2x body is ook niks imho, liever gewoon rowgroup eigenlijk (sterker nog, in de scope van een th vul je ook rowgroup in en niet tbody)

[Verwijderd]

Dat komt omdat ROWGROUP er ook is voor THEAD en TFOOT. In CSS heb je voor 'display' de volgende waarden met betrekking tot tabellen: 'table', 'inline-table', 'table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-column-group', 'table-column', 'table-cell' en 'table-caption'. HTML is helaas niet meer te veranderen.