nicht angemeldet
Hallo,
ich möchte Tabellenspalten dynamisch verbreitern, wenn ich mit der Maus drüberfahre. Vorher verborgener Text soll dann erscheinen. Damit das ganze nicht flackert, soll die Zeilenhöhe (column height) konstant sein.
Versuche mit :hover/css habe ich aufgegeben, da der hover-Effekt nur für das "eigene" Element bzw. das "eigene" Eltern-Element ausgeführt wird, also z.B. für eine Zelle. Zellen kann man zwar gruppieren, aber eben nur über die Zeile (tr). Meinen Wunscheffekt könnte ich also für Zeilen/ 'Änderung der Höhe' ausführen. Aber eben nicht für Spalten/ 'Änderung der Breite'. Dafür fehlt ein Spalten-gruppierendes Element - col hilft hier nicht.
Meine eben gestellten Thesen dürfen gerne widerlegt werden, bis dahin fahre ich mit javasrcipt fort:
Mit JS ist es mir zwar gelungen, bin aber nicht zufrieden:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title> test</title>
<style type="text/css">
<!--
td{
width:30px;
border:1px solid black;
}
span{
height:20px;
display:block;
overflow:hidden;
}
-->
</style>
<script type="text/javascript">
function mouse_over(id){
var table = document.all ? document.all.aTable : document.getElementById('aTable');
for (var r = 0; r < table.rows.length; r++)
table.rows[r].cells[id].style.width = "100px";
}
function mouse_out(id){
var table = document.all ? document.all.aTable : document.getElementById('aTable');
for (var r = 0; r < table.rows.length; r++)
table.rows[r].cells[id].style.width = "30px";
}
</script>
</head>
<body>
<table id="aTable">
<colgroup>
<col class="foo" />
<col class="foo" />
<col class="foo" />
<col class="foo" />
</colgroup>
<tr>
<td><span onmouseover="mouse_over(0)" onmouseout="mouse_out(0)">
12345 67890 12345 67890 12345 67890
</span></td>
<td><span onmouseover="mouse_over(1)" onmouseout="mouse_out(1)">
12345 67890 12345 67890 12345 67890
</span></td>
<td><span onmouseover="mouse_over(2)" onmouseout="mouse_out(2)">
12345 67890 12345 67890 12345 67890
</span></td>
<td><span onmouseover="mouse_over(3)" onmouseout="mouse_out(3)">
12345 67890 12345 67890 12345 67890
</span></td>
</tr>
<tr>
<td><span onmouseover="mouse_over(0)" onmouseout="mouse_out(0)">
12345678901234567890 12345 67890
</span></td>
<td><span onmouseover="mouse_over(1)" onmouseout="mouse_out(1)">
12345 67890 12345 67890 12345 67890
</span></td>
<td><span onmouseover="mouse_over(2)" onmouseout="mouse_out(2)">
12345 67890 12345 67890 12345 67890
</span></td>
<td><span onmouseover="mouse_over(3)" onmouseout="mouse_out(3)">
12345 67890 12345 67890 12345 67890
</span></td>
</tr>
</table>
</body>
</html>
Nicht zufrieden weil:
1. firefox hat mit overflow:hidden Probleme. Wenn eine Zeichenkette zu lang ist, bleibt die Spalte entsprechend breit - soll das so sein? Operas Anzeige scheint mir logischer: Der Text wird abgeschnitten - Er wird versteckt: 'hidden' eben!
2. der Code ist mir zu aufgeblasen - jede Tabellen-Zelle mit mouseover und -out. und dann noch eine js-Schleife, die jedes mal alle Tabellen-Zeilen durchläuft? Hat jemand eine einfachere Idee?
Danke und VG
KBS170