Version 4.0 // Digital Astronauts
LautundKlar GmbH
Ludwigstraße 2
94032 Passau
Version 4.0 // Digital Astronauts
Mit Hilfe von CSS3 kann man Tabellen runde Ecken und damit eine etwas abwechslungsreichere Optik verleihen. Zu beachten ist jedoch, dass man nicht einer ganze Tabelle (<table>) abgerundete Ecken „verpassen“ kann, sondern die runden Ecken müssen auf die Zellen (<td>) übertragen werden, welche abgerundet erscheinen sollen. Durch Verwendung folgender CSS2-Selektoren (: first-child etc.) und der CSS3-Eigenschaften „border-radius“ kann man diese vier äußeren Ecken abrunden:
table.mit_runden_ecken tr:first-child td:first-child { border-top-left-radius: 15px; }
table.mit_runden_ecken tr:first-child td:last-child { border-top-right-radius: 15px; }
table.mit_runden_ecken tr:last-child td:first-child { border-bottom-left-radius: 15px; }
table.mit_runden_ecken tr:last-child td:last-child { border-bottom-right-radius: 15px; }
Eine noch besser ausgearbeitete Lösung findet man bei Red Team Design: