Rahmen um Tabellenzeile

[AllesMeins]

Hiho,

irgendwie komme ich mir jetzt unglaublich blöd vor das fragen zu müssen, aber:
Wie bekomme ich einen Rahmen um eine ganze Tabellenzeile. Also nicht um die einzelnen zellen sondern nur einen Rahmen um die Zeile. Ich dachte ja eigentlich das das nicht so schwer sein kann und ich einfach dem tr element ein border zuweise, aber Pustekuchen. Seltsamerweise funktioniert es dem element eine Hintergrundfarbe zuzuweisen, wieso also nicht mit "border:medium solid blue;"

Grüße

Marc

[Gunnar Bittersmann]

AllesMeins,
Du hast vermutlich nicht das pssende Rahmenmodell [CSS2 §17.6] gewählt.

Live long and prosper,
Gunnar

[AllesMeins]

Hiho,

hmm, wenn ich das richtig verstehe gibt das Rahmenmodell an wie sich die Rahmen selber verhalten. Das ändert aber nichts daran das ich keinen Rahmen einer Zeile zuordnen kann. Das höchste der gefühle was ich damit erreichen konnte war ein Rahmen dessen Linien nicht ganz so dick sind um die einzelnen Zellen. Das ist aber eigentlich nicht mein Ziel gewesen.
Auch die Beispiele dort zeigen keinen Zeilemrahmen, sondern immer nur Zellenrahmen.

Grüße

Marc

[Axel Richter]

Hallo,

hmm, wenn ich das richtig verstehe gibt das Rahmenmodell an wie sich die Rahmen selber verhalten. Das ändert aber nichts daran das ich keinen Rahmen einer Zeile zuordnen kann.

Doch, standardkonforme Browser sollten Rahmen um alle Elemente, also auch um TR-Elemente erlauben. Sichtbar werden diese natürlich nur mit border-collapse:collapse.

Ich habe hier eine Variante, die auch mit dem IE funktioniert:

<style type="text/css">

  
table#w3standard {border-collapse:collapse;}  
table#w3standard tr {border:medium solid blue;}  
  
table#alle {border-collapse:collapse; border:medium solid blue;}  
table#alle td {border-bottom:medium solid blue;}  

</style>

  
<table id="w3standard">  
<tr>  
 <td>Zelle</td>  
 <td>Zelle</td>  
 <td>Zelle</td>  
</tr>  
<tr>  
 <td>Zelle</td>  
 <td>Zelle</td>  
 <td>Zelle</td>  
</tr>  
</table>  
<hr>  
<table id="alle">  
<tr>  
 <td>Zelle</td>  
 <td>Zelle</td>  
 <td>Zelle</td>  
</tr>  
<tr>  
 <td>Zelle</td>  
 <td>Zelle</td>  
 <td>Zelle</td>  
</tr>  
</table>  

viele Grüße

Axel

[AllesMeins]

Hiho,

erst einmal danke für den Vorschlag. Leider eröffnet sich nun ein neues Problem. Die Tabelle hat einen Header, der nicht mit umrandet werden soll. Gut, im Mozilla ist das kein Problem einfach den Rahmen statt um das table Element um das tbody-Element gezeichnet. Nur dummerweise ist der IE zu blöd dafür.
Irgendwelche Ideen für diesen Spezialfall?

Grüsse

Marc

[Axel Richter]

Hallo,

erst einmal danke für den Vorschlag. Leider eröffnet sich nun ein neues Problem. Die Tabelle hat einen Header, der nicht mit umrandet werden soll. Gut, im Mozilla ist das kein Problem einfach den Rahmen statt um das table Element um das tbody-Element gezeichnet. Nur dummerweise ist der IE zu blöd dafür.
Irgendwelche Ideen für diesen Spezialfall?

...keine mehr mit CSS alleine. Entweder, Du markierst die jeweils linken und rechten TD-Elemente der zu umrahmenden Zeilen mit Klassen und selektierst dann mit CSS diese Klassen, um die Rahmenlinien zuzuweisen oder Du verlässt Dich darauf, dass in den IEs JavaScript immer aktiviert ist und baust ein IE-only-JavaScript[1] ein, welches die entsprechenden Zellen umrahmt.

[1] etwa so:
<!--[if IE]><script type="text/javascript">
function formatTable() {
  var myTable = document.getElementById("TabellenID");
  if(myTable) {
    myTDs= myTable.getElementsByTagName("td");
    for (var i = 0; i < myTDs.length; i++) {
       if(!myTDs[i].previousSibling) {
          myTDs[i].style.borderLeft="medium solid blue";
       }
       if(!myTDs[i].nextSibling) {
          myTDs[i].style.borderRight="medium solid blue";
        }
    }
  }
}
if (document.getElementById && document.getElementsByTagName) {
  window.onload=formatTable;
}
</script><![endif]-->

viele Grüße

Axel

[Gernot Back]

Hallo Marc,

Wie bekomme ich einen Rahmen um eine ganze Tabellenzeile.(...) Seltsamerweise funktioniert es dem element eine Hintergrundfarbe zuzuweisen, wieso also nicht mit "border:medium solid blue;"

Nun gut das ist aufwändig, aber über den Kind- und/oder Nachfahrenselektor doch auch machbar:

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Zeilenborder</title>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<style type="text/css">  
[code lang=css]  
table {  
  border-collapse:collapse;  
  width:100%;  
}  
  
tr.border td {  
  border:solid blue;  
  border-width:medium 0;  
  text-align:center;  
}  
  
tr.border td.first {  
  border-left-width:medium;  
}  
  
tr.border td.last {  
  border-right-width:medium;  
}

</style>
</head>
<body>
<table>
<tr class="border">
 <td class="first">erste</td>
 <td>mittlere</td>
 <td class="last">letzte</td>
</tr>
<tr class="border">
 <td class="first">erste</td>
 <td>mittlere</td>
 <td class="last">letzte</td>
</table>
</body>
</html>
[/code]

Gruß Gernot

[Gunnar Bittersmann]

Nun gut das ist aufwändig, aber über den Kind- und/oder Nachfahrenselektor doch auch machbar:

Gernot,
Aus meiner Antwort ging bereits hervor, dass es auch nicht aufwendig machbar ist – ohne so ’nen Schnickschnack.

Du bist dem Link in die CSS2-Spec nicht gefolgt?

Live long and prosper,
Gunnar