Axel Richter: border beim tr

Beitrag lesen

SELF-Forum

border beim tr

Axel Richter
– Informationen zu den Bewertungsregeln

Hallo,

Muss ich also damit Leben, dass dieses Problem im Internet Explorer nicht zu beheben ist, sondern bestenfalls zu umgehen?

Ja. Der IE interpretiert CSS border für das TR-Element nicht. Ein Workaround wäre, CSS border-top und border-bottom für alle TDs in der gewünschten TR zu setzen. Das würde die Zeile zumindest oben und unten mit einem Rahmen versehen. Voraussetzung ist in jedem Fall
table { border-collapse:collapse; }

Weitere Annäherung bringt dann nur noch JavaScript, z.B. in einer CSS expression():

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
        "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
<head>  
<title>CSS TR-border-Workaround for IE</title>  
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
<style type="text/css">  
/*allgemeingueltiges CSS*/  
table { border-collapse:collapse; }  
tr#border { border:2px solid black; }  
</style>  
<!--[if ie]>  
<style type="text/css">  
/*IE-only-CSS*/  
tr#border td { border-top:2px solid black; border-bottom:2px solid black; }  
  
/*ab hier funktioniert es nur noch mit eingeschaltetem JavaScript*/  
tr#border td { border-left:expression((this == this.parentNode.getElementsByTagName("TD")[0])?"2px solid black":"none"); border-right:expression((this == this.parentNode.getElementsByTagName("TD")[this.parentNode.getElementsByTagName("TD").length-1])?"2px solid black":"none"); }  
</style>  
<![endif]-->  
</head>  
<body>  
<table>  
<tr>  
 <td>zelle1</td>  
 <td>zelle2</td>  
 <td>zelle3</td>  
</tr>  
<tr id="border">  
 <td>zelle4</td>  
 <td>zelle5</td>  
 <td>zelle6</td>  
</tr>  
<tr>  
 <td>zelle7</td>  
 <td>zelle8</td>  
 <td>zelle9</td>  
</tr>  
</table>  
</body>  
</html>

Erläuterung zu

  
tr#border td { border-left:expression((this == this.parentNode.getElementsByTagName("TD")[0])?"2px solid black":"none"); border-right:expression((this == this.parentNode.getElementsByTagName("TD")[this.parentNode.getElementsByTagName("TD").length-1])?"2px solid black":"none");

Alle TDs in TR#border bekommen eine linke Rahmenlinie, wenn sie dem ersten TD-Element innerhalb ihres parentNodes (TR) entsprechen(this.parentNode.getElementsByTagName("TD")[0]), also das erste TD im TR sind.

Alle TDs in TR#border bekommen eine rechte Rahmenlinie, wenn sie dem letzten TD-Element innerhalb ihres parentNodes (TR) entsprechen(this.parentNode.getElementsByTagName("TD")[this.parentNode.getElementsByTagName("TD").length-1]), also das letzte TD im TR sind.

viele Grüße

Axel

Beitrag melden
–
Informationen zu den Bewertungsregeln