Festzsetzen der maximalen Breite für eine Zelle/Tabelle

[Enrico]

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

[Der Martin]

Hi,

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:

oh, kleiner ging's wohl nicht? ;-)

Und hier wird das Problem ersichtlich.

Eher nicht. Das Bild ist zu stark verkleinert. Ich erkenne leider nur ein oliv-braunes Gematsche.

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

Ich habe die inhaltliche Struktur (Gliederung) deiner Seite noch nicht ganz verstanden, mutmaße aber, dass eine Tabelle hier nicht das richtige Mittel ist. Wenn du mal etwas mehr ins Detail gehen möchtest (und im ersten Schritt bitte ohne Bild und ohne Rücksicht auf die Darstellung), kann man mal gemeinsam überlegen, ob nicht andere Elemente sinnvoller wären.

<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>

  

> 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.  
  
Normalerweise haben alle Zellen einer Spalte dieselbe Breite. Möchtest du die Breite der gesamten Spalte verändern?  
  
  

> Hier der JavaScript-Code, der die Breite der Tabelle, die Breite der Zelle "Vorname" ermittelt und die maximalen Breiten auch festlegen soll:  
  

> ~~~javascript

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");  
> }

Es gibt kein HTML-Attribut max-width. Was du da zuweist, sieht eher wie CSS aus, dann meinst du vermutlich Tabelle.style.maxWidth (oder Zelle.style.maxWidth).

Aber der Kardinalfehler ist IMO, dass du eine Tabelle gegen ihre "Natur" verbiegen willst. Mit einer semantisch passenderen Auszeichnung des Inhalts ist das vermutlich auch weniger problematisch.

Ciao,
 Martin

PS: Bitte reiß deinen Text doch nicht in einzelne Zeilen auseinander, erst recht nicht mit Leerzeilen dazwischen. Das macht es sehr schlecht lesbar.

[Enrico]

Hallo Martin,

Tabelle.style.maxWidth (oder Zelle.style.maxWidth)

Das war's! :-)

In Kombination mit gleichzeitiger Definition einer Dummy-Mindestbreite im css-Stylesheet funktioniert es nun wie beabsichtigt.

Besten Dank,
Enrico