Bearbeiten - Originaltitel: Gibt es einen alternativen Weg, um die border-collapse:collapse en CSS (um einen Tisch mit zusammengeklappten, abgerundeten Ecken zu erhalten)?
Da sich herausgestellt hat, dass das Problem mit der Wurzel nicht gelöst werden kann, wenn man die Tabellenränder einfach zusammenklappen lässt, habe ich den Titel aktualisiert, um die Diskussion besser wiederzugeben.
Ich versuche, eine Tabelle mit abgerundeten Ecken zu erstellen. unter Verwendung der CSS3 border-radius Eigentum. Die Tabellenstile, die ich verwende, sehen in etwa so aus:
table {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px
}Hier ist das Problem. Ich möchte auch die border-collapse:collapse Eigenschaft, und wenn diese gesetzt ist border-radius funktioniert nicht mehr. Gibt es eine CSS-basierte Methode, mit der ich denselben Effekt erzielen kann wie border-collapse:collapse ohne sie tatsächlich zu benutzen?
Bearbeitungen:
Ich habe eine einfache Seite erstellt, um das Problem zu demonstrieren aquí (nur Firefox/Safari).
Ein großer Teil des Problems scheint darin zu bestehen, dass die Einstellung der Tabelle, abgerundete Ecken zu haben, keine Auswirkungen auf die Ecken der Ecke hat td Elemente. Wäre die Tabelle einfarbig, wäre dies kein Problem, da ich die oberen und unteren Elemente einfach zu td abgerundete Ecken für die erste bzw. letzte Reihe. Ich verwende jedoch verschiedene Hintergrundfarben für die Tabelle, um die Überschriften und die Streifen zu unterscheiden, so dass die inneren td Elemente würden auch ihre abgerundeten Ecken zeigen.
Zusammenfassung der vorgeschlagenen Lösungen:
Wenn man den Tisch mit einem anderen Element mit runden Ecken umgibt, funktioniert das nicht, weil die eckigen Ecken des Tisches "durchscheinen".
Wenn Sie die Randbreite auf 0 festlegen, wird die Tabelle nicht eingeklappt.
Unten td Die Ecken sind immer noch quadratisch, nachdem der Zellabstand auf Null gesetzt wurde.
Wenn Sie stattdessen JavaScript verwenden, umgehen Sie das Problem.
Mögliche Lösungen:
Die Tabellen werden in PHP generiert, also könnte ich einfach eine andere Klasse auf jede der äußeren th/tds anwenden und jede Ecke separat gestalten. Ich würde lieber nicht tun dies, da es nicht sehr elegant und ein bisschen ein Schmerz, um auf mehrere Tabellen anwenden, so halten Sie bitte Vorschläge kommen.
Mögliche Lösung 2 ist die Verwendung von JavaScript (insbesondere jQuery) zur Gestaltung der Ecken. Diese Lösung funktioniert auch, aber immer noch nicht ganz das, was ich suche (ich weiß, ich bin wählerisch). Ich habe zwei Vorbehalte:
- dies ist eine sehr schlanke Website, und ich möchte JavaScript auf ein Minimum beschränken
- Ein Teil des Reizes, den die Verwendung von border-radius für mich hat, ist die anmutige Degradierung und progressive Verbesserung. Durch die Verwendung von border-radius für alle abgerundeten Ecken hoffe ich, in CSS3-fähigen Browsern eine einheitlich abgerundete und in anderen Browsern eine einheitlich eckige Seite zu haben (ich schaue dich an, IE).
Ich weiß, dass der Versuch, dies mit CSS3 zu tun, heute unnötig erscheinen mag, aber ich habe meine Gründe. Ich möchte auch darauf hinweisen, dass dieses Problem ein Ergebnis der w3c-Spezifikation ist, nicht schlechte CSS3-Unterstützung, so dass jede Lösung immer noch relevant und nützlich sein wird, wenn CSS3 mehr Unterstützung hat.
