✔ Tabelle: Zellenbreite

[MasterGeo]

Hallo,

ich hätte da ein gutes altes Tabellen Problemchen. Ich zeige eine ganze Menge Daten in einer Tabelle an. Da nicht alle Daten in eine Zeile passen möchte ich per Javascript eine weitere Zeile darunter auklappen. Das klappt soweit fast. Am liebsten würde ich alles in eine Tabelle packen und nur das TR verstecken und per Klick sichtbar machen. Hier spielt aber der Firefox nicht mit. Deshalb habe ich ein Workaraound gebastelt und jede Zeile in eine eigene Table gepackt. Ein/Aus blenden funktioniert soweit auch, nur die Spalten haben einfach nicht die gleiche Weite.

Das sieht dann ungefähr so aus:

HTML:

    <table style="width:100%;" cellpadding="0" cellspacing="1" border="0">
      <tr>
        <th style="width:270px;">Überschirft</th>
        <th style="width:200px;">Test</th>
    </tr>
    </table>
    <table style="width:100%;" cellpadding="0" cellspacing="1" border="0">
      <tr>
        <th style="width:270px;">Was anderes</th>
        <th style="width:200px;">Test</th>
    </tr>
    </table>
<TABLE style="width:100%; table-layout:fixed; overflow:hidden; margin-top:0px; margin-bottom:0px;" cellpadding="1" cellspacing="1" border="0">
<td style="width:270px;">
                	<a href="javascript:toggleExtendedData('row1');"><img src="/dc_web/images/icons/open_down.gif" alt="Mehr Infos" name="row101Image" width="11" height="10" border="0" align="baseline" id="row1Image"></a> Mehr Infos
				        </td>
<tr>
</table>

Das passende Javascript lautet so:

function toggleExtendedData (row) {
	if (document.getElementById){
		if(document.getElementById(row).style.display == "none"){
			document.getElementById(row).style.display = "block";
				document.getElementById(row+'Image').src= "/images/icons/open_up.gif";
		}else{
			document.getElementById(row).style.display = "none";
				document.getElementById(row+'Image').src= "/images/icons/open_down.gif";
		}
	}
}

1. Wieso habe ich so Probleme, dass die Zellen gleich nicht weit sind?
2. Gibt es eine Alterantive, dass ich alles in eine Tabelle bekomme?

Danke

 

[Maik]

Hi,

bestimme mal für die Tabellen eine fixe Breite, die sich aus den beiden benachbarten Tabellenzellen ergibt - also 470 Pixel.

 

[MasterGeo]

Schon Probiert, bringt leider gar nichts.

 

[Maik]

Bei mir erzielt der Vorschlag die gewünschte Wirkung.

<table style="width:470px;" cellpadding="0" cellspacing="1" border="1">
      <tr>
        <th style="width:270px;">Überschirft</th>
        <th style="width:200px;">Test</th>
    </tr>
    </table>
    <table style="width:470px;" cellpadding="0" cellspacing="1" border="1">
      <tr>
        <th style="width:270px;">Was anderes</th>
        <th style="width:200px;">Test</th>
    </tr>
    </table>
<TABLE style="width:270px; overflow:hidden; margin-top:0px; margin-bottom:0px;" cellpadding="1" cellspacing="1" border="1">
<tr>
<td style="width:270px;">
                        <a href="javascript:toggleExtendedData('row1');"><img src="/dc_web/images/icons/open_down.gif" alt="Mehr Infos" name="row101Image" width="11" height="10" border="0" align="baseline" id="row1Image"></a> Mehr Infos
                                        </td>
<tr>
</table>

 

[MasterGeo]

Mist verdammter, so geht es bei mir auch. Die Tabelle ist in Wirklichkeit aus der Datenbank und einige mehr Spalten und Zeilen und da haut es mir auseinander.
Gibt es denn keine Möglichkeit das Teil Firefox kompatibel in eine Tabelle zu packen?

 

[MasterGeo]

Ich habe es gerade noch mal erfolglos Probiert. Vielleicht sollte ich mal den Fehler beschreiben, denn Firefox macht. Bei dem Click erscheint brav das TR aber beim schließen, bleibt ein Platzhalter stehen. Öffne ich das TR wieder schieb sich der Platzhalter weiter nach unten und das TR darüber. So kann ich prima die Zeilen raunter wieter nach unten verschieben - ist natürlich nicht gewollt

In meinem Script ist zu sehen, dass ich display:none bzw block benutze. Das ist doch so richtig, oder?

 

[Maik]

Probier es mal mit einem leeren String anstatt dem Wert block:

function toggleExtendedData (row) {
        if (document.getElementById){
                if(document.getElementById(row).style.display == "none"){
                        document.getElementById(row).style.display = "";
                                document.getElementById(row+'Image').src= "/images/icons/open_up.gif";
                }else{
                        document.getElementById(row).style.display = "none";
                                document.getElementById(row+'Image').src= "/images/icons/open_down.gif";
                }
        }
}

 

[MasterGeo]

Nein leider auch nicht.

 

[Maik]

Und auch dieser Vorschlag funktioniert bei mir u.a. im Firefox tadellos.

 

[MasterGeo]

Ich bin auch gerade über diesen Lösungsansatz gestolpert: http://jszen.blogspot.com/2004/07/table-rowsrevealed.html
Ich blick es auch nicht warum das nicht geht. Ich werde jetzt eine Browserweiche einbauen, denn mit display:table-row funktioniert es in FF.

Vielen Dank für Deine unermüdliche und schnelle Hilfe. Scheinbar ist mir nicht zu helfen ;-)


// EDIT

Ich nehme alles zurück, es geht doch!! Yippi