nicht angemeldet
Tabelle mit Rahmen pro Zeile
Gunnar BittersmannHallo zusammen,
ich versuche eine Tabelle zu erstellen, bei der die einzelnen Zeilen einen farbigen Rahmen haben und von Zeile zu Zeile ein kleiner Abstand sichtbar ist.
Das Problem, dass man bei einem TR-Element keinen Rahmen definieren kann, habe ich dadurch umgangen, dass die einzelnen Zellen einen Rahmen zusammenbauen, aber im IE wird leider eine Unterbrechung des Rahmens angezeigt (im FF ist es so, wie ich es haben möchte). Wenn ich border-collapse auf collapse stelle, geht mir leider (in IE und FF) der Abstand zwischen den Zeilen flöten.
Wahrscheinlich gibt's eine einfache Lösung, aber ich komme leider nicht drauf und wäre für Hilfe sehr dankbar.
Grüße,
Gunnar
Beispiel:
<HTML>
<HEAD>
<TITLE>Tabellentest</TITLE>
<style type="text/css">
table.mytable {
width: 248px;
border-spacing: 0px 2px;
/* border-collapse: collapse; */
}
table.mytable td {
border-top: solid 2px #006666;
border-bottom: solid 2px #006666;
}
table.mytable td.leftcol {
border-left: solid 2px #006666;
}
table.mytable td.rightcol {
border-right: solid 2px #006666;
}
table.mytable input {
height: 11px;
font-size: 9px;
float: right;
}
</style>
</HEAD>
<BODY>
<TABLE class="mytable">
<TR>
<TD class="leftcol">Zeile 1</TD>
<TD class="rightcol"><INPUT type="text" name="x1" /></TD>
</TR>
<TR>
<TD class="leftcol">Zeile 2</TD>
<TD class="rightcol"><INPUT type="text" name="x2" /></TD>
</TR>
<TR>
<TD class="leftcol">Zeile 3</TD>
<TD class="rightcol"><INPUT type="text" name="x3" /></TD>
</TR>
</TABLE>
</BODY>
</HTML>
-
Hello out there!
Das Problem, dass man bei einem TR-Element keinen Rahmen definieren kann,
Klar kann man das. [CSS2 §17.6.2]
Wenn ich border-collapse auf collapse stelle
Eben das solltest du tun.
geht mir leider (in IE und FF) der Abstand zwischen den Zeilen flöten.
Die 'padding'-Eigenschaft kennst du?
See ya up the road,
Gunnar--
„Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)-
Hallo Gunnar,
danke für Deine Antwort.Das Problem, dass man bei einem TR-Element keinen Rahmen definieren kann,
Klar kann man das. [CSS2 §17.6.2]
Nur sehe ich leider im IE keine Rahmen. :-(
geht mir leider (in IE und FF) der Abstand zwischen den Zeilen flöten.
Die 'padding'-Eigenschaft kennst du?
Für welches Element soll ich die denn setzen? Ich habe jetzt alles mögliche ausprobiert, aber bekomme leider nicht das gewünschte Ergebnis.
Hier das vereinfachte Beispiel, zeigt zweilenweise Rahmen in FF, aber nicht IE, und keine Abstände zwischen den Zeilen:
<HTML>
<HEAD>
<TITLE>Tabellentest</TITLE>
<style type="text/css">
table.mytable {
width: 248px;
border-collapse: collapse;
}table.mytable tr {
border: solid 2px #006666;
}table.mytable input {
height: 11px;
font-size: 9px;
float: right;
}
</style>
</HEAD>
<BODY>
<TABLE class="mytable">
<TR>
<TD>Zeile 1</TD>
<TD><INPUT type="text" name="x1" /></TD>
</TR>
<TR>
<TD>Zeile 2</TD>
<TD><INPUT type="text" name="x2" /></TD>
</TR>
<TR>
<TD>Zeile 3</TD>
<TD><INPUT type="text" name="x3" /></TD>
</TR>
</TABLE>
</BODY>
</HTML>Gruß,
Gunnar-
Hi
probiers mal so:
<HTML> <HEAD> <TITLE>Tabellentest</TITLE> <style type="text/css"> table.mytable { width: 248px; border-collapse: collapse; border: solid 2px #006666; } table.mytable td { border-top: solid 2px #006666; border-bottom: solid 2px #006666; } table.mytable input { height: 11px; font-size: 9px; float: right; } </style> </HEAD> <BODY> <TABLE class="mytable"> <TR> <TD>Zeile 1</TD> <TD><INPUT type="text" name="x1" /></TD> </TR> <TR> <TD>Zeile 2</TD> <TD><INPUT type="text" name="x2" /></TD> </TR> <TR> <TD>Zeile 3</TD> <TD><INPUT type="text" name="x3" /></TD> </TR> </TABLE> </BODY> </HTML>Jetzt hat die Tabelle nen Rahmen und die Zellen oben und unten. Durch das border-collapse haste den gleichen effekt wie wenn Du nur nen Zeilenrahmen setzt, nur dass es so auch im Internet Explorer geht.
Grüße
Bezkeroon
-
Hi!
Jetzt hat die Tabelle nen Rahmen und die Zellen oben und unten. Durch das border-collapse haste den gleichen effekt wie wenn Du nur nen Zeilenrahmen setzt, nur dass es so auch im Internet Explorer geht.
Genau, das ist schon mal ein Schritt vorwärts, vielen Dank.
Hast Du zufälligerweise auch noch eine Idee, wie ich zwischen die einzelnen Zeilen jetzt einen Abstand bekomme?Gruß,
Gunnar-
Hellihello Gunnar,
Genau, das ist schon mal ein Schritt vorwärts, vielen Dank.
Hast Du zufälligerweise auch noch eine Idee, wie ich zwischen die einzelnen Zeilen jetzt einen Abstand bekomme?Dass verhinderst Du glaube ich mit dem border-collapse:collapse.
ein padding-bottom:3em; für die td sollte dir aber zeigen, wie das padding funktioniert.
Dank und Gruß,
frankx
-
Hi!
Hast Du zufälligerweise auch noch eine Idee, wie ich zwischen die einzelnen Zeilen jetzt einen Abstand bekomme?
Dass verhinderst Du glaube ich mit dem border-collapse:collapse.
Ja, das glaube ich auch. Aber ohne habe ich wieder Unterbrechungen in den Rahmen. Grmpf.
ein padding-bottom:3em; für die td sollte dir aber zeigen, wie das padding funktioniert.
Soweit war ich auch schon mal, aber trotzdem danke für die Hilfe.
Grüße,
Gunnar-
Hellihello Gunnar,
Soweit war ich auch schon mal, aber trotzdem danke für die Hilfe.
Was willst Du denn darstellen? Vielleicht kommste ja besser ohne Tabelle hin? Oder machst für jede Zeile eine Tabelle (pfui Semantik).
Dank und Gruß,
frankx
-
Hi frankx,
Was willst Du denn darstellen? Vielleicht kommste ja besser ohne Tabelle hin? Oder machst für jede Zeile eine Tabelle (pfui Semantik).
das ganze soll ein Eingabeformular werden, mit mehr Feldern als in dem Beispiel. Frag nicht, warum das so aussehen soll, das hat sich halt der Designer ausgedacht, ich bin nur das ausführende Organ...
Klar, ich könnte auch einzelne DIVs oder so definieren, ist halt bloß irgendwie auch hässlich.
Eigentlich schade, dass CSS das so direkt scheinbar nicht ermöglicht.Grüße,
Gunnar-
Hi,
das ganze soll ein Eingabeformular werden, mit mehr Feldern als in dem Beispiel. Frag nicht, warum das so aussehen soll, das hat sich halt der Designer ausgedacht, ich bin nur das ausführende Organ...
Klar, ich könnte auch einzelne DIVs oder so definieren, ist halt bloß irgendwie auch hässlich.
und noch unsinniger.
Verwende die dafür vorgesehenen Elemente [1] und formatiere sie entsprechend. Eine Tabelle ist hierfür nicht nötig.[1] vor allem <label> - dieses Element mit dem dazugehörigem <input> z.B. in ein <p> gesetzt ermöglicht Dir auch die gewünschte Formatierung.
freundliche Grüße
Ingo
-
-
-
-
-
-
-
-