nicht angemeldet
Tabellezwischenraum formatieren
Hallo,
ich möchte gerne ein "Schachfeld" von 4 x 4 Kästen auf meiner Homepage habe. Desweiteren möchte ich das diese Kästen von waagerechten und senkrechten Striche voneinander getrennt sind, etwa so:
! ! !
____!____!____!____
! ! !
____!____!____!____
! ! !
____!____!____!____
! ! !
! ! !
Die Linien sollen dabei durchgezogen sein.
Wenn ich border auf 1 stelle habe ich einen ähnlichen Effekt, jedoch in 3D (d.h. mit Schatten) und unterbrochenen Linen weil die Linen ja um die Zellen und nicht um die Spalten und Zeilen laufen.
Meine bisherigen Versuche mit CSS:
.tabline {
border-top-color:#ffffff;
border-left-color:#ffffff;
border-right-color:#ffffff;
border-bottom-color:#999999;
border-width:3px;
border-style:solid;
}
Wenn ich die Klasse im <tr> anwende bleibt es ohne Wirkung, im <td> ist der Rahmen zwar formatiert, jedoch in 3D.
Weiss da einer weiter???
Dennis
-
fang doch einfach an
td.rahmen { border: 1px solid black;
border-collapse:collapse;
}et voila du hast ein Gitter Netz, jede Zelle hat einen Rahmen (ohne "3D")
willst du um die gesamte Tabelle KEINEN Rahmen, wirds bissl schwieriger, weil du dann mehrere Klassen nehmen mußt
eine dafür (linke Zelle bis vorletzte in der Zeile)
;
___;eine dafür (rechte Zelle)
___
und extra für die letzte Zeile der Tabelle
___
;
;..wiederum für die Zelle am rechten Rand
___
(Klasse von weiter oben ist wiederverwertbar)
-
Hallo,
Die Linien sollen dabei durchgezogen sein.
Wenn ich border auf 1 stelle habe ich einen ähnlichen Effekt, jedoch in 3D (d.h. mit Schatten) und unterbrochenen Linen weil die Linen ja um die Zellen und nicht um die Spalten und Zeilen laufen.Die einfachste Möglichkeit wäre für deine Tabelle schlichtes html:
<table width="400" cellpadding="0" cellspacing="3" border="1" frame="void">Wenn du jedoch die Rahmen selbst mit CSS formaitieren möchtest, muss du leider bestimmte Zellen mit Klassen versehen und sie so formatieren, gebe für die Tabelle die du so formatieren möchtest folgendes an:
table { border-collapse:collapse; border:0;}
td.linksaussen {
border-top:solid 3px #999999;
border-bottom:solid 3px #999999;
}
td.rechtssaussen {
border-top:solid 3px #999999;
border-bottom:solid 3px #999999;
}
td.oben {
border-right:solid 3px #999999;
border-left:solid 3px #999999;
}
td.unten {
border-right:solid 3px #999999;
border-left:solid 3px #999999;
}
td.mitte {
border:solid 3px #999999;
}Grüße
Thomas-
Hallo,
Wenn du jedoch die Rahmen selbst mit CSS formaitieren möchtest, muss du leider bestimmte Zellen mit Klassen versehen und sie so formatieren, gebe für die Tabelle die du so formatieren möchtest folgendes an:
table { border-collapse:collapse; border:0;}
td.linksaussen {
border-top:solid 3px #999999;
border-bottom:solid 3px #999999;
}
td.rechtssaussen {
border-top:solid 3px #999999;
border-bottom:solid 3px #999999;
}
td.oben {
border-right:solid 3px #999999;
border-left:solid 3px #999999;
}
td.unten {
border-right:solid 3px #999999;
border-left:solid 3px #999999;
}
td.mitte {
border:solid 3px #999999;
}Naja, wenn man den Gesamtrahmen nicht transparent, sondern nur in der Hintergrundfarbe haben möchte, dann geht es auch einfacher:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Gitter</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
body {background-color:#FFF;}
table {border-collapse:collapse; border:1px solid #FFF;}
td {width:50px; height:50px; border:3px solid #999;}
-->
</style>
</head>
<body>
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>viele Grüße
Axel
-
Hallo Axel,
»
Naja, wenn man den Gesamtrahmen nicht transparent, sondern nur in der Hintergrundfarbe haben möchte, dann geht es auch einfacher:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Gitter</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
body {background-color:#FFF;}
table {border-collapse:collapse; border:1px solid #FFF;}
td {width:50px; height:50px; border:3px solid #999;}
-->Das funktioniert leider nur im IE.
Mozilla und Opera machen es richtig nach dem Standard und die Rahmen der Zellen überlagern den Rahmen der Tabelle.Grüße
Thomas-
Hallo Thomas,
Das funktioniert leider nur im IE.
Mozilla und Opera machen es richtig nach dem Standard und die Rahmen der Zellen überlagern den Rahmen der Tabelle.Ja, aber ;-))
body {background-color:#FFF;}
table {border-collapse:collapse; border:4px solid #FFF;}
td {width:50px; height:50px; border:3px solid #999;}sollte funktionieren.
Es _muss_ ja möglich sein, den Tabellenrahmen anders einzufärben, als die Zellrahmen.
viele Grüße
Axel
-
Hallo Axel,
Das funktioniert leider nur im IE.
Mozilla und Opera machen es richtig nach dem Standard und die Rahmen der Zellen überlagern den Rahmen der Tabelle.
Ja, aber ;-))body {background-color:#FFF;}
table {border-collapse:collapse; border:4px solid #FFF;}
td {width:50px; height:50px; border:3px solid #999;}sollte funktionieren.
"sollte funktionieren" ist nicht dasselbe wie "es funktioniert" ;-)
Es _muss_ ja möglich sein, den Tabellenrahmen anders einzufärben, als die Zellrahmen.
Das ist ja auch so, der Rahmen der Tabelle _wird_ auch anderes gefärbt, aber die Rahmen der Zellen liegen über den Rahmen der Tabelle, also werden sie und nicht der Rahmen der Tabelle dargestellt.
(vergleich auch http://www.w3.org/TR/REC-CSS2/tables.html#table-layers )Grüße
Thomas-
Hallo Thomas,
body {background-color:#FFF;}
table {border-collapse:collapse; border:4px solid #FFF;}^hier hinsehen und..
td {width:50px; height:50px; border:3px solid #999;}
^hiermit vergleichen
sollte funktionieren.
"sollte funktionieren" ist nicht dasselbe wie "es funktioniert" ;-)Es funktioniert aber. Siehe oben ;-))
(vergleich auch http://www.w3.org/TR/REC-CSS2/tables.html#table-layers )
Ja, aber ;-))
http://www.w3.org/TR/REC-CSS2/tables.html#border-conflict-resolution
...
3. If none of the styles is 'hidden' and at least one of them is not 'none', then narrow borders are discarded in favor of wider ones.
...Genau das passiert auch in Geckos und Operas. Der breitere (4px) Tabellenrahmen gewinnt gegen den schmaleren (3px) Zellenrahmen.
viele Grüße
Axel
-
Hallo Axel,
body {background-color:#FFF;}
table {border-collapse:collapse; border:4px solid #FFF;}
^hier hinsehen und..
td {width:50px; height:50px; border:3px solid #999;}
^hiermit vergleichenDas habe ich in der Tat übersehen.
Ja so funktioniert es. :-)Grüße
Thomas
-
-
-
-
-
-