Tabelle ohne Aussenrand
Martin Hein
- css
Hallo Forum,
wie definiere ich die CSS-Eigenschaften einer Tabelle,
die nur innen Gitternetzlinen aufweisen soll ? Wenn,
eine table{width:300px;} definiert ist, die aussen
keinen Rand (also alle äusseren Zellen ohne Anstand
bis ans äussere Ende der Tabelle gehen) soll, die Zellen
untereinander aber einen Abstand ausweisen sollen.
td{padding:1px} bedeutet, dass die äusseren Zellen einen
abstand zum Tabellenrand haben. damit hat die Tabelle einen
Aussenrand. Mit td{border:1px} verhällt es sich genauso.
Die Eigenschaft {border-collapse: collapse;} habe ich schon
gefunden. die bringt mich aber nicht weiter.
???
tausen Dank für Tipps,
beste gruesse,
martin
Hello out there!
wie definiere ich die CSS-Eigenschaften einer Tabelle,
die nur innen Gitternetzlinen aufweisen soll ?
Mit den Pseudoklassen ':first-child' und ':last-child' sowie Selektoren für Nachfahren/Kinder überschreibst du 'border-top' und 'padding-top' für die Zellen der ersten Zeile, 'border-right' und 'padding-right' für die Zellen der letzten Spalte, ...
Eine Lösung für veraltete Browser wäre die Vergabe von Klassen "first-child" und "last-child" für die jeweiligen 'tr'- und 'td'-Elemente.
See ya up the road,
Gunnar
Hallo Gunnar,
warum denn immer noch so umständlich?
border:hidden
für das TABLE-Element selbst und gut is!
Naja, nur für den IE muss man dann schon noch etwas mehr tun,
das hatten wir ja schon vor Kurzem:
http://forum.de.selfhtml.org/archiv/2007/1/t144326/#m937090
Gruß Gernot
Ich dachte es geht um Ränder, speziell um Padding, nicht um Rahmen.
Hallo Yordan,
Ich dachte es geht um Ränder, speziell um Padding, nicht um Rahmen.
Es geht um eine Tabelle ohne Außenrand und wie Martin schon gesagt hat, ist es ihm egal, ob das mit Padding oder mit einem in der Farbe des die Tabelle umgebenden Hintergrundes realisierten Rahmens passiert:
td{padding:1px} bedeutet, dass die äusseren Zellen einen
abstand zum Tabellenrand haben. damit hat die Tabelle einen
Aussenrand. Mit td{border:1px} verhällt es sich genauso.
Gruß Gernot
Hallo nochmal,
ein das Padding der Tabellenzellen kompensierender negativer Margin für das Table-Element sollte allerdings die einfachste Lösung sein, die von allen Browsern ohne Probleme umgesetzt wird. Die Gesamtbreite der Tabelle müsste dann natürlich um das Doppelte des Zellen-Paddings heraufgesetzt werden.
Gruß Gernot
Hi Gernot,
ist schon klar, dass ich die Tabelle breiter angeben kann,
um damit den aussenrand irgendwie kompensieren. aber genau
das ist der punkt !
Ich habe ein Einen <p>-Absatz, der sich in 100%iger Breite
im 'Content'- Bereich erstreckt. Tabelle darunter will ich
mit 100%-Breite definieren, damit sie sich entsprechend
ausdehnt. Das Layout der Tabelle sieht keinen Aussenrand,
jedoch Zellenabstände vor. Wie beschreibe ich diese Tabelle
mit CSS. Das war meine ursprüngliche Frage, für die Ihr gute
Lösungen angeboten habt.
Die eigentlich 'richtigere' Lösung ist tatsächlich die mit
den Pseudoklassen. Richtig in dem Sinne, dass CSS das
beschreibt, was dargestellt wird. Was ich brauch ist aber
eine Lösung die browserübergreifend funktioniert, wie deine
Lösung. Die sagt mir, ich muss tricksen. Und dann gibt es
in meinem Fall mehrere Wege, wie z.B. deine Vorschlag, oder
die Tabelle einefach statt mit 100% mit der Breite des
Contentbereichs + 2 mal Cellpadding zu defininieren, oder
Sie eine div zu legen, dass ich per clipping zurechtschneide
Was davon ich am Ende mache, weiss ich noch nicht.
besten Dank und
viel Grüsse,
martin
Hallo Jungs,
das ist ja tatsächlich wesentlich komplexer, als ich
dachte ;(
die lösung mit den 'childs' scheint für ie nicht zu
funktionieren, wenn ich's richtig verstanden habe.
die lösung mit dem div funktioniert auch nur dann,
wenn man für den ie einen sonderfall baut. egal, wenn
sie funktioniert ;)
tausend dank
für die tipps und
besten gruss,
martin