Hallo zusammen
Ich habe eine Tabelle wo einzelne Zellen aus- und eingeblendet werden. Das funktioniert eigentlich ganz prima. Meine Anforderung wäre nun aber, dass die Zelle nicht nach links aufrücken, wenn eine Zelle ausgeblendet wird, sondern nach oben. Ich kann nicht die ganze Tabellenzeile ausblenden, da dann Werte fehlen würden, die ich anzeigen möchte.
Hier eine Beispieltabelle: Wenn ich zum Beispiel Zelle 5 ausblende, soll nicht Zelle 6 nach links aufrücken, sondern Zelle 8 nach oben. Ist das irgendwie mit CSS möglich? Mit float: top; bin ich nicht wirklich weitergekommen.
Vielen Dank und Gruss
Axel
Ich habe eine Tabelle wo einzelne Zellen aus- und eingeblendet werden. Das funktioniert eigentlich ganz prima. Meine Anforderung wäre nun aber, dass die Zelle nicht nach links aufrücken, wenn eine Zelle ausgeblendet wird, sondern nach oben. Ich kann nicht die ganze Tabellenzeile ausblenden, da dann Werte fehlen würden, die ich anzeigen möchte.
Hier eine Beispieltabelle: Wenn ich zum Beispiel Zelle 5 ausblende, soll nicht Zelle 6 nach links aufrücken, sondern Zelle 8 nach oben. Ist das irgendwie mit CSS möglich? Mit float: top; bin ich nicht wirklich weitergekommen.
HTML:
<script>
function switchIt(elem) {
element = document.getElementById(elem);
if (element.style.display == 'block') {
element.style.display = 'none';
} else {
element.style.display = 'block';
}
}
</script>
<body>
<table border="0" cellspacing="2" cellpadding="2" width="100%">
<tr>
<td align="center">Spalte 1</td>
<td align="center">Spalte 2</td>
<td align="center">Spalte 3</td>
</tr>
<tr>
<td bgcolor="#FF0000" id="one" style="display: block; float: top;"> 1 </td>
<td bgcolor="#00FF00" id="two" style="display: block; float: top;"> 2 </td>
<td bgcolor="#0000FF" id="three" style="display: block; float: top;"> 3 </td>
</tr>
<tr>
<td bgcolor="#CC0000" id="four" style="display: block; float: top;"> 4 </td>
<td bgcolor="#00CC00" id="five" style="display: block; float: top;"> 5 </td>
<td bgcolor="#0000CC" id="six" style="display: block; float: top;"> 6 </td>
</tr>
<tr>
<td bgcolor="#990000" id="seven" style="display: block; float: top;"> 7 </td>
<td bgcolor="#009900" id="eight" style="display: block; float: top;"> 8 </td>
<td bgcolor="#000099" id="nine" style="display: block; float: top;"> 9 </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td align="center"><input type="button" value="Switch one" style="width: 100px;" onclick="switchIt('one');"></td>
<td align="center"><input type="button" value="Switch two" style="width: 100px;" onclick="switchIt('two');"></td>
<td align="center"><input type="button" value="Switch three" style="width: 100px;" onclick="switchIt('three');"></td>
</tr>
<tr>
<td align="center"><input type="button" value="Switch four" style="width: 100px;" onclick="switchIt('four');"></td>
<td align="center"><input type="button" value="Switch five" style="width: 100px;" onclick="switchIt('five');"></td>
<td align="center"><input type="button" value="Switch six" style="width: 100px;" onclick="switchIt('six');"></td>
</tr>
<tr>
<td align="center"><input type="button" value="Switch seven" style="width: 100px;" onclick="switchIt('seven');"></td>
<td align="center"><input type="button" value="Switch eight" style="width: 100px;" onclick="switchIt('eight');"></td>
<td align="center"><input type="button" value="Switch nine" style="width: 100px;" onclick="switchIt('nine');"></td>
</tr>
</table>
</body>
</table>Vielen Dank und Gruss
Axel