XHTMLforum - Tabellen Rahmen um einzelne Zellen

Seite 1 von 2

40 Beiträge dieses Themas auf einer Seite anzeigen

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Tabellen Rahmen um einzelne Zellen (http://xhtmlforum.de/showthread.php?t=62888)

seeadler

07.11.2010 14:52

Tabellen Rahmen um einzelne Zellen

Hi,

bin irgendwie verwirrt; kann mir jemand sagen wie ich per css einer Tabelle bzw. der einzelnen Zellen einen Rahmen verpassen kann?

seeadler

07.11.2010 15:01

also wenn ich es so definiere

Code:

table, th, td

{

border: 1px solid black;

}

....dann habe ich einen doppelten Rand; ich möchte gerne eine einfach Linie zwischen den einzelnen Zellen

ArcVieh

07.11.2010 15:01

Was hast Du denn schon probiert?
Der Tabelle selber einen Rahmen zu geben, geht so:

HTML-Code:

table {

   border:1px solid #000;

}

Den einzelnen Zellen einen Rahmen zu geben, funktioniert genau so:

HTML-Code:

td {

   border:1px solid #000;

}

Wenn Du möchtest, dass die Rahmen "zusammenfallen" musst Du border-collapse verwenden.

HTML-Code:

table {

   border-collapse: collapse;

}

Oder habe ich dein Problem falsch verstanden?

seeadler

07.11.2010 19:36

hätte da noch ne Frage: habe eine leerzeile in spalte 1 bzw. spalte4.
Kann mir aber nicht erklären warum?
Grafiken in unterschiedlichen Formaten .bmp; png; jpg; gif

heiko_rs

07.11.2010 20:50

Das ist keine Leerzeile, sondern vertical-align: middle;, das td standardmäßig hat :)

Übrigens hat border-collapse einen heftigen Bug in Firefox bis inkl. 3.5, https://bugzilla.mozilla.org/show_bug.cgi?id=155955, so dass man im Zweifelsfalle zur klassischen Variante greifen sollte:

1. border-spacing: 0; für table
2. die Zellen bekommen border-right & -bottom
3. td:first-child zusätzlich noch border-left (oder table, solange dies kein Boxmodell-Problem bereitet)
4. table bekommt border-top

Der IE < 8 kann dann die Variante per border-collapse: collapse; bekommen - in jedem Falle aber der IE < 7, denn er kennt :first-child nicht.

seeadler

07.11.2010 21:39

danke für den Tipp:
habs nun folgendermaßen definiert:

Code:

table

{

border-style: solid;

border-color: #00F;

border-width:1px;

border-spacing:0;

border-top:1px;

text-align:left;

}



td

{

border-style: solid;

border-color: #00F;

border-right:1px;

border-bottom:1px;

}



td:first-child

{

border-left:1px;

}

http://ph.dyntec.de/mountain.html
........leider wird mir da der obere border und die inneren border der Tabelle nicht angezeigt. Habe ich da was vergessen?

heiko_rs

07.11.2010 21:45

Ich würde hier immer einfach nur border-top: 1px solid #00f; schreiben, und analog für left, right und bottom.

seeadler

08.11.2010 06:31

habs nun so definiert:

Code:

table

{

border-top: 1px solid #00f;

border-spacing:0;

text-align:left;

}



td

{

border-bottom: 1px solid #00f;

border-right: 1px solid #00f;

}



td:first-child

{

border-left: 1px solid #00f;

}

leider ist da immer noch die "Leerzeile" bzw. vertical-align: middle;in der ersten und letzten Spalte

ArcVieh

08.11.2010 10:04

Zitat:

Zitat von seeadler (Beitrag 479111)

leider ist da immer noch die "Leerzeile" bzw. vertical-align: middle;in der ersten und letzten Spalte

Setz es doch auf vertical-align:top;
Mehr Infos zu vertical-align hier.

seeadler

08.11.2010 22:36

hab's nun so definiert:

Code:

table

{

border-style:solid;

border-width:1px;

border-color: #00f;

border-spacing:0;

text-align:left;

border-collapse:collapse;

}



td

{

vertical-align:top;

border-style:solid;

border-width:1px;

border-color: #00f;

}

Also habe meinen Quellcode nun in den aktuellen Browsern: IE 8, Firefox 3.6 und Opera 10.63 anzeigen lassen und bin mit dem Ergebnis soweit zufrieden.
Kann mir jemand sagen ob ich mit diesem CSS-Code in älteren Browser-Versionen Anzeige Probleme bekommen werde?

Alle Zeitangaben in WEZ +2. Es ist jetzt 16:49 Uhr.

Seite 1 von 2

40 Beiträge dieses Themas auf einer Seite anzeigen