[CSS] Lijn onder tabelkop

[Savantas]

Stel, ik heb een tabel (met tabular data! ) met een kop (thead) van meerdere rijen.
Nu wil ik onder de kop via CSS een dikke lijn. Als ik de volgende css neem:

code:

thead th { border-bottom: 2px solid black; }

Dan komt dit (uiteraard) onder elke th.
Is er een manier om te zorgen dat alleen de onderste row een lijn krijgt?
Thead zelf een lijn geven werkt iig niet. En de onderste row een class meegeven is ook niet de opzet.

[André]

Tja, je zou de tegenhanger van th:first-child moeten hebben th:last-child maar die bestaat zover ik weet niet. Ik denk haast dat je met JS van alle theads de lastChild een border moet geven.

En kun je niet gewoon de thead een border geven?

[ Voor 15% gewijzigd door André op 19-05-2005 16:17 . Reden: beter lezen ]

[Verwijderd]

ey andré lezen:

Thead zelf een lijn geven werkt iig niet. En de onderste row een class meegeven is ook niet de opzet.

anyways, :last-child bestaat niet in css 2.1, :first-child daarentegen wel

levert

Cascading Stylesheet:

tbody tr:first-child {
  border-top: 2px solid black;
}

niet visueel hetzelfde resultaat?

[Savantas]

Jee, dat zal ik eerst even moeten testen. Wel giga stom dat ik daar niet aan gedacht heb. Alleen naar inderdaad iets als last-child lopen zoeken...

Hmm, must be close... Ik krijg wel een achtergrond in de eerste rij, maar geen border-top. Werkt die niet op een tr, alleen td? Zou dan mogelijk ook op gaan voor thead ...

CSS

code:

table { border-top: 1px solid black; border-bottom: 1px solid black; }
td { font-size: 12px; text-align: left; padding-right: 4px; padding-left: 4px; }
th { font-style: normal; font-weight: 600; font-size: 0.9em; text-align: center; padding-right: 4px; padding-left: 4px; }
tbody tr:first-child { border: 2px solid black; margin-top: 2px; padding-top: 2px; background: silver; }

HTML

code:

<table cellpadding="0" cellspacing="0">
<thead>
<tr>
    <th colspan="2">foo</th> <th>bar</th>
</tr>
<tr>
    <th>lorem</th>  <th>ipsum</th>  <th>dolor</th>
</tr>
</thead>
<tbody>
<tr>
    <td>1</td>  <td>2</td>  <td>3</td>
</tr>
<tr>
    <td>1</td>  <td>2</td>  <td>3</td>
</tr>
</tbody>
</table>

Nu maar hopen dat IE7 het straks in ieder geval ondersteund...

[ Voor 115% gewijzigd door Savantas op 19-05-2005 16:38 ]

[Verwijderd]

ff op css 3 wachten, in firefox zit ie overigens al

overigens als je meerdere tbody's hebt moet je het ff aanpassen, maar dat begrijp je ook wel gok ik

Cascading Stylesheet:

tbody:first-child tr:first-child

[ Voor 63% gewijzigd door Verwijderd op 19-05-2005 16:35 ]

[Savantas]

Hmm, gaat in IE zoiezo niet lukken... Dan maar kijken of ik de XSL zo aan kan passen dat de laatste thead cells (of de eerste tbody ) cells een class krijgen.

Anyway, thanx Mophor.

[Verwijderd]

Cascading Stylesheet:

tbody:first-child tr:first-child

Euh, en wat als THEAD voor TBODY komt, zoals gebruikelijk? Dan matched TBODY echt niet 'first-child'. 'first-of-type', ok, maar er is geen browser die dat ondersteund. Wat je wil is iets als 'tbody:first-child,thead+tbody,tbody:first-of-type'.

[Verwijderd]

U heeft helemaal gelijk, nogal stom