Hallo, ich möchte, dass beim tr:hover die komplette tr-spalte einen rahmen und eine hintergrundfarbe bekommt. Ich hab das schon einigermaßen hinbekommen.
Aber wieso fehlt rechts, und bei dem letzten tr unten der border?(Chrome)
Mozilla zeigt bei mir gar keinen border an.
Und ab und zu verziehst, das ganze, d.h. es bleibt einfach border-teile farbig, obwohl der hover schon längst wo anders ist.
Ich weiß das funktioniert noch nicht unter ie, ich mach das später noch mit whatever:hover.
Aber wieso fehlt rechts, und bei dem letzten tr unten der border?(Chrome)
Mozilla zeigt bei mir gar keinen border an.
Und ab und zu verziehst, das ganze, d.h. es bleibt einfach border-teile farbig, obwohl der hover schon längst wo anders ist.
Ich weiß das funktioniert noch nicht unter ie, ich mach das später noch mit whatever:hover.
Code:
<!doctype html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
* { font-size:11px; font-family:Verdana, Geneva, sans-serif;}
body {padding:25px;}
.tbox {width:100%; overflow:hidden; white-space:nowrap; border-collapse:collapse;}
.fr {width:150px; min-width:150px;}
.dt { text-align:right;}
.sj, .fr { color:#e38909;}
.tbox tr {height:25px; border:1px solid white;}
.tbox td {padding:4px;}
.tbox tr:hover td {border-top:1px solid #e38909;border-bottom:1px solid #e38909;background-color:#FFEDCF}
.tbox tr:hover .fr {border-left:1px solid #e38909;}
.tbox tr:hover .dt {border-right:1px solid #e38909;}
.tbox a {color:inherit; text-decoration:none;}
.tbox a:hover {text-decoration:underline;}
</style>
</head>
<body>
<table class="tbox">
<tr>
<td class="fr">
<a>Peter</a>
</td>
<td class="sj">
<a>Wie geht es euch heute?</a>
</td>
<td class="dt">
2.Mär.
</td>
</tr>
<tr>
<td class="fr">
<a>Susanne</a>
</td>
<td class="sj">
<a>Hallo!!!!</a>
</td>
<td class="dt">
3. Nov.
</td>
</tr>
<tr>
<td class="fr">
<a>Felix</a>
</td>
<td class="sj">
<a>Alles klar bei euch?</a>
</td>
<td class="dt">
15.Mär.
</td>
</tr>
</table>
</body>
</html>
Zuletzt bearbeitet:
