[CSS] Hoe ronde tabel borders maken?

[Reveller]

Hieronder heb ik twee plaatjes van dezelfde tabel. Het is een eenvoudige tabel met border=1 en cellpadding=2 met border-collapse:


Om de tabellen beter te laten aansluiten bij de rest van het design, wil ik graag ronde tabel hoeken:


Het voorbeeld hierboven is gephotoshopped, want het lukt me niet om het mbv css op te lossen. De ronde hoek is natuurlijk een plaatje, maar als ik dat als achtergrond van de tabel-cel instel, komt de border nog gewoon om het plaatje heen.

Ik loop er nu al uren mee te prutsen - wie heeft een handige manier om mbv css de buitenste vier cellen ronde hoeken mee te geven, zonder dat alle overige cellen ook aparte (border-on-)classes toegewezen moeten krijgen?

[André]

Dit kun je alleen doen door 4 images absoluut over de tabel te positioneren met CSS of met JS.

[SchizoDuckie]

in firefox

Cascading Stylesheet:

TABLE
{
-moz-border-radius: 0.75;
}

zo was het volgens mij

[Verwijderd]

@ SchizoDuckie

Bah, wat een mottige code, na elke kleine update van een browser kan je site naar de knoppen zijn.
Nuja, ik zou ook nog eens moeten denken over een beter oplossing, maar dit lijkt me zo vals. Ok FF is leuker en handiger, maar de meeste mensen surfen nog via IE.

[Boelie-Boelie]

Misschien heb je wat aan de artikelen over round corners op 456 Berea Street:
www.456bereastreet.com/ar...stom_corners_and_borders/ (CSS + js)
www.456bereastreet.com/ar...stom_corners_and_borders/ (CSS + extra markup)

[CaptBiele]

je moet inderdaad 4 transparante achtergrond plaatjes gebruiken voor de hoeken.
Zoek even op alistapart.com voor een artikel..

[BtM909]

Verwijderd schreef op donderdag 15 september 2005 @ 00:17:
@ SchizoDuckie

Bah, wat een mottige code, na elke kleine update van een browser kan je site naar de knoppen zijn.
Nuja, ik zou ook nog eens moeten denken over een beter oplossing, maar dit lijkt me zo vals. Ok FF is leuker en handiger, maar de meeste mensen surfen nog via IE.

Hoezo na elke kleine update van een browser

Voor een goede oplossing in CSS, zal onze TS nog wel even moeten wachten op CSS3.
And believe me, that will take a looooooong time

[Verwijderd]

Kijk hier maar eens.

maak een div met de bovenstaande manier, en plaats daar dan je tabel in (als je dat nodig acht iig).

[McVirusS]

AListApart.com heeft hier een artikel over: http://www.alistapart.com/articles/mountaintop

[Reveller]

Bedankt voor de reacties, maar geen van de aangeboden oplossingen is wat ik zoek. Ik zit met het probleem dat ik een CMS output krijg waar ik geen vat op heb. Ik krijg een tabel terug uit het CMS die ik mbv CSS kan stylen; het is niet mogelijk om deze tabellen in een extra div te plaatsen of in een andere tabel welke vier buitenste cellen ik met een kwartrond plaatje vul. Was het maar zo simpel! Op die manier maak ik al jaren ronde hoeken. Jammer is dat de border-radius van CSS3 nog lang op zich zal laten wachten. Alleen -moz-border-radius gebruiken heeft geen zin: 90% van de bezoekers krijgt dan nog steeds rechte hoeken.

Elke cel van de tabel heeft wel een eigen class:

HTML:

<table border="1">
  <tr>
    <td class="cell top left">appel</td>
    <td class="cell">peer</td>
    <td class="cell top right">banaan</td>
  </tr>
  <tr>
    <td class="cell bottom left">appel</td>
    <td class="cell">peer</td>
    <td class="cell bottom right">banaan</td>
  </tr>
</table>

Ik hoop te dus mbv css een oplossing te vinden in de zin van:

Cascading Stylesheet:

table, td {
  border-color    : red;
  border-collapse : collapse;
  }

td.cell .top .left {
  background      : url(images/corner_top_left.gif) no-repeat top left;
  }

/* etc... */

Probleem is dan alleen dat de tabel er zo uitziet:



Zoals je ziet loopt de tabelrand om de achtergrond heen. Is het wellicht op een of andere creatieve manier nodig om css te vertellen dat de background van de 4 hoek-cellen OVER de rand heen moet vallen (bv. met een padding van -1px ofzo)?

[djluc]

Je zou eventueel met JS de tabellen in een aantal divjes kunnen zetten. Dat kan door de DOM aan te passen met functies als getElementsByTagName, createElement en appendChild. De opmaak kan je dan gewoon met de bovenstaande methoden doen.

[Verwijderd]

Reveller schreef op zaterdag 17 september 2005 @ 14:24:
Is het wellicht op een of andere creatieve manier nodig om css te vertellen dat de background van de 4 hoek-cellen OVER de rand heen moet vallen (bv. met een padding van -1px ofzo)?

Nee, dat staat het model niet toe.

[edwinistrator]

Reveller schreef op zaterdag 17 september 2005 @ 14:24:

Probleem is dan alleen dat de tabel er zo uitziet:

[afbeelding]

Zoals je ziet loopt de tabelrand om de achtergrond heen. Is het wellicht op een of andere creatieve manier nodig om css te vertellen dat de background van de 4 hoek-cellen OVER de rand heen moet vallen (bv. met een padding van -1px ofzo)?

zorg dan dat de border van je table niet aan staat maar dat je de borders in je classes van de td's doet met behulp van backgroundplaatjes

[ Voor 75% gewijzigd door edwinistrator op 17-09-2005 16:07 ]

[Verwijderd]

[quote][
td.cell .top .left {
background : url(images/corner_top_left.gif) no-repeat top left;
}

hier kun je ook een positie aan geven, top left veranderen in -2px -2px zou misschien kunnen helpen, zeker weten doe ik het niet of het zo moet, maar het kan wel...

[Pendaco]

wellicht heb je hier ook wat aan;

http://www.dreamdealer.nl/index31.php?show_tut=29

de maker van de site zit ook hier op dit forum, ben alleen ff zn naam kwijt

[Reveller]

Pendaco schreef op zaterdag 17 september 2005 @ 17:13:
wellicht heb je hier ook wat aan;

http://www.dreamdealer.nl/index31.php?show_tut=29

Puur jatwerk van A List Apart natuurlijk: http://www.alistapart.com/articles/mountaintop. En dan ook nog eens verschrikkelijk ranzig vertaald...

[RobIII]

Reveller schreef op zaterdag 17 september 2005 @ 17:29:
[...]


Puur jatwerk van A List Apart natuurlijk: http://www.alistapart.com/articles/mountaintop. En dan ook nog eens verschrikkelijk ranzig vertaald...

Hoewel ik slecht tegen jatwerk kan, moet ik het deze auteur wel nageven:

Het origineel wordt er netjes aangegeven. Dat het een ranzige "vertaling" is is iets anders..