Hallo 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>