Tabelle ein/ausblenden, nachstehenden Content "nachziehen"

Mik3e

Mik3e

Erfahrenes Mitglied
Guten Morgen!

Stehe vor einem kleinen Layout Problem:
Habe eine Liste von mehrere Links. Nach jedem Link ist eine Tabelle eingefügt. Klick der User auf einen Link, so wird die direkt nachstehende Tabelle angezeigt. Das Problem ist nur, dass der Platz der Tabelle (wenn sie nicht sichtbar ist), dennoch am Dokument reserviert wird (d.h. ich hab zwischen jedem Link einen mächtigen Abstand).

Nun sollen die nachfolgenden Links natürlich entsprechend "nachgezogen" oder "nachgeschoben" werden.

Die tabellen blende ich mit dem Style-Attribut visibility ein und aus.

Hat jemand einen Tipp für mich, wie ich das Problem beseitigen kann?

Danke & LG
Mike
 
So, hier noch das passenden Beispiel dazu:
PHP: 
<html>
<head>
<title>Test</title>
</head>
<title>Test</title>
<script type="text/javascript">
<!--
function showHideTable(tableid) {
	if (document.getElementById(tableid).style.visibility=='hidden') {
		document.getElementById(tableid).style.visibility='visible';
	} else {
		document.getElementById(tableid).style.visibility='hidden';
	}
}
//-->
</script>
</head>
<body>
<a href="#" onClick="showHideTable('table1')">Tabelle 1 ein/ausblenden</a>
<table id="table1" width="200" height="200" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF0000" style="visibility:hidden">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
<a href="#" onClick="showHideTable('table2')">Tabelle 2 ein/ausblenden</a>
<table id="table2" width="200" height="200" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF0000" style="visibility:hidden">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
<a href="#" onClick="showHideTable('table3')">Tabelle 3 ein/ausblenden</a>
<table id="table3" width="200" height="200" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF0000" style="visibility:hidden">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

LG
Mike
 
Doch noch ein Problem:
Im IE gehts problemlos, im Firefox aber z.b. nicht (dort klappt zwar das einblenden, beim ausblenden werden die nachfolgenden Elemente jedoch nicht nachgezogen).
 
Es gibt folgende Display-Eigenschaft, mit der die Tabelle im Firefox korrekt ein-/ausgeblendet wird:

table-row = Das Element enthält nebeneinander angeordnete Kindelemente. Wirkt wie das tr-Element in HTML.
Funktioniert im FF toll, der IE kennt diese eigenschaft aber nicht..
Was tun sprach Zeus?
 
Wie wäre es, wenn Du die Tabellen jeweils in ein div einbettest.
Das geht soweit ich weiß auch im IE

vop
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück