Enrico: Festzsetzen der maximalen Breite für eine Zelle/Tabelle

Beitrag lesen

Hallo,

ich baue über php eine Tabelle auf, die nach dem Aufrufen der Seite verschiedene Informationen gleich sichtbar anzeigt,

das verwendete Equipment und, sofern vorhanden, den Werdegang aber noch nicht anzeigt:

Diese Informationen sollen erst nach Anklicken auf "Equipment" bzw. "Werdegang" angezeigt werden:

Und hier wird das Problem ersichtlich.

Der Werdegang ist ein eingelesener Text, der die Tabelle auf die verfügbare Breite der Homepage ausdehnt.

Um dies eigentlich zu vermeiden, habe ich aktuell folgenden Ansatz:

1. Ermitteln der Tabellenbreite
2. Festsetzen des eben ermittelten Wertes als "max-width" über JavaScript für die Tabelle
3. Ermitteln der Breite der ersten Zelle, in der der Vornamen angezeigt wird
   Diese Zelle repräsentiert ja auch die Breite der gesamten Spalte, also auch der Zelle, in der der Werdegang angezeigt

wird
4. Festsetzen des eben ermittelten Wertes als "max-width" über JavaScript für die Zelle

Hier die html-Ausgabe der Tabelle im Browser:

  
<table class="Zentriert" cellspacing="0" id="Tabelle">  
   <tbody>  
  
      <tr>  
         <td class="VorSpaltentitelLinks"></td>  
         <td colspan="3" class="Gelb">MATZE</td>  
         <td class="NachSpaltentitelRechts"></td>  
      </tr>  
      <tr>  
         <td class="ZeilenteilerGrossLinks"></td>  
         <td colspan="3" class="ZeilenteilerGrossMitte"></td>  
         <td class="ZeilenteilerGrossRechts"></td>  
      </tr>  
      <tr>  
         <td rowspan="9" class="RahmenLinks"></td>  
         <td>Vorname:</td>  
         <td id="Zelle">Mathias</td>  
         <td rowspan="9" class="TextOben">...</td>  
         <td rowspan="9" class="RahmenRechts"></td>  
      </tr>  
      <tr>  
         <td>Geburtsjahr:</td>  
         <td>1967</td>  
      </tr>  
      <tr>  
         <td>Geburtsort:</td>  
         <td>Leipzig</td>  
      </tr>  
      <tr>  
         <td>Wohnort:</td>  
         <td>Vilsbiburg</td>  
      </tr>  
      <tr>  
         <td>Aufgabe:</td>  
         <td>Schlagzeug</td>  
      </tr>  
      <tr>  
         <td>Mitglied seit:&nbsp;</td>  
         <td>2012</td>  
      </tr>  
      <tr>  
         <td>Facebook:</td>  
         <td>www.facebook.com/mathias.franke.75</td>  
      </tr>  
      <tr>  
         <td id="AufZuklappen3" class="TextOben" onclick='Anzeigen("Equipment",3);'>&or; Equipment</td>  
         <td id="Equipment3" class="Versteckt">  
            -Tama Acoustic-Set "Rockstar"  
            -Remo Pinstripe  
               ...  
            -Pearl Eliminator 2002  
         </td>  
      </tr>  
      <tr>  
         <td id="AufZuklappen3" class="TextOben" onclick='Anzeigen("Werdegang",3);'>&or; Werdegang:</td>  
    ===> <td id="Werdegang3" class="Versteckt">  
            Im zarten Alter von 13 Jahren [...] mit Vorliebe Sticks kaputt machen.  
         </td> <===  
      </tr>  
      <tr>  
         <td class="AbschlussLinksUnten"></td>  
         <td colspan="3" class="ZeilenteilerGrossMitte"></td>  
         <td class="AbschlussRechtsUnten"></td>  
      </tr>  
  
   </tbody>  
</table>  

Die mit "===>" und "<===" gekennzeichnete Zelle stellt das Problem dar. Diese Zelle dehnt sich auf die verfügbare Breite

der Homepage aus. Dabei soll der Text aber entsprechend der ermittelten Breite der Zelle "Vorname" umgebrochen werden.

Hier der JavaScript-Code, der die Breite der Tabelle, die Breite der Zelle "Vorname" ermittelt und die maximalen Breiten

auch festlegen soll:

  
function Initialisieren()  
{  
   var Tabelle        = document.getElementById("Tabelle"),  
       Tabellenbreite = Tabelle.offsetWidth,  
       Zelle          = document.getElementById("Zelle"),  
       Zellenbreite   = Zelle.offsetWidth;  
  
   Tabelle.setAttribute("max-width", Tabellenbreite + "px !important");  
   Zelle.setAttribute("max-width", Zellenbreite + "px !important");  
}  

Diese Funktion wird nach dem vollständigen Aufbauen der Seite aufgerufen und steht unmittelbar vor dem schliessenden

</body>-Tag:

  
<script type="text/javascript" language="javascript">  
   if(window.addEventListener)  
      window.addEventListener("load",Initialisieren,false);  
   else  
      if(window.attachEvent)  
         window.attachEvent("onload",Initialisieren);  
      else  
         window.onload=Initialisieren;  
</script>  

Habe ich etwas falsch gemacht, dass die ermittelten und (eigentlich) festgesetzten Breitenangaben ignoriert werden?
Was muss ich anders machen, damit ich mein Vorhaben umgesetzt bekomme?

Vielen Dank für eure Hilfe und Gruß,
Enrico