ich möchte eine zeile einer tabelle erst einmal "eingeklappt" anzeigen (nur die 1. zeile ist sichtbar) und dann bei bedarf "ausklappen" (alle weiteren zeilen werden sichtbar).
die gesamte struktur der tabelle sieht so aus:
Code:
<table>
<tr>
<td id="row0_cell0" rowSpan=3>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td id="row1_cell1" style="display:none">...</td>
<td id="row1_cell2" style="display:none">...</td>
</tr>
<tr>
<td id="row2_cell1" style="display:none">...</td>
<td id="row2_cell2" style="display:none">...</td>
</tr>
</table>
per JS werden dann die unsichtbaren tabellenfelder sichtbar gemacht.
Code:
document.getElementById("row1_cell1").style.display="table-cell";
document.getElementById("row1_cell2").style.display="table-cell";
document.getElementById("row2_cell1").style.display="table-cell";
document.getElementById("row2_cell2").style.display="table-cell";
das funktioniert auch wunderbar.
das problem ist nun, daß im eingeklappten zustand zwar ein rowspan=3 angegeben wird, man jedoch die anderen beiden zeilen nicht sieht. das hat zur folge, daß man einen häßlichen abstand am unteren ende der tabelle sieht, als würde codemäßig mit der tabelle etwas nicht stimmen. das dürfte deswegen sein, weil HTML mit einem rowSpan rechnet, jedoch keine rows da sind (bzw. eigentlich schon, aber halt nicht sichtbar).
setze ich rowspan=1, ists dasselbe, weil die anderen zeilen ja eigentlich schon da sind (sprich, man kanns HTML eigentlich nicht recht machen).
ich habe nun probiert, zuerst rowSpan=1 hard zu coden und vor dem sichtbar machen der anderen zeilen das rowSpan-attribut manuell per DOM-zugriff auf 3 zu setzen. das funktioniert zwar (habs mir ausgeben lassen) und die tabelle wird im ausgeklappten zustand auch schön angezeigt, allerdings sieht man im eingeklappten zustand immer noch diesen häßlichen abstand (weil eben trotzdem 3 zeilen vorhanden sind, aber nur ein rowSpan=1 gesetzt wurde), als würde etwas mit dem code nicht stimmen.
weiß jemand eine lösung für dieses problem?