Adaptive Breitentabelle für HTML-Seiten

Auf den Seiten von Webanwendungen werden häufig Tabellen verwendet. Bei einer begrenzten Anzahl von Spalten dürfte es relativ einfach sein, den Inhalt jeder Spalte an Bildschirme mit unterschiedlichen Auflösungen anzupassen. Hier werde ich über meine Lösungen und Ansichten zu dieser Art von Problem sprechen. Das Einstellen aller Spalten auf feste Breiten kann solche Anforderungen offensichtlich nicht erfüllen, aber wenn alle Spalten auf Prozentwerte eingestellt sind, befürchte ich, dass es bei bestimmten Größen oder Auflösungen unschön wird. Ich bin es eher gewohnt, es folgendermaßen zu handhaben – vorausgesetzt, die Anzahl der Spalten in der Tabelle ist nicht zu groß – die meisten Spaltenbreiten auf feste Werte festzulegen, eine Spalte ohne Breiteneinstellung zu lassen und die Tabellenbreite auf einen Prozentsatz des Bildschirms festzulegen (z. B. 95 %, 98 % usw.).

Beispiel:

<Tabellenbreite="95%" Grenze="1" Zellpadding="2" Zellenabstand="1">
  <tr>
    <td width="50px" nowrap>Seriennummer</td>
    <td width="150px" nowrap>Kategorie A</td>
    <td width="150px" nowrap>Kategorie B</td>
    <td width="200px" nowrap>Name</td>
    <td nowrap>Beschreibung</td>
    <td width="100px" nowrap>Betrieb</td>
  </tr>
  …
</Tabelle> 

In diesem Beispiel hat die Spalte mit dem Namen „Beschreibung“ einen relativ langen Inhalt. Ich persönlich denke, dass diese Spalte als Spalte mit schwebender Breite eingestellt werden kann, um sie an die Breite der Seite anzupassen.

Wenn jedoch in der Tabelle halbbreite Zeichen vorkommen, die länger als die Spaltenbreite sind, wird die Breite von td durch den Inhalt unterbrochen. Wie soll das gelöst werden?

Die Lösung für dieses Problem besteht darin, style="word-wrap:break-word;" zum TD der Detailzeile hinzuzufügen. Dadurch werden aufeinanderfolgende Zeichen halber Breite umbrochen und die Spaltenbreite wird nicht mehr unterbrochen.

Beispiel:

    <td align="left" width="150px" style="Wortumbruch:Wortumbruch;">
      …
    </td>

Durch Anwenden dieser Methode kann das Problem für TD-Spalten mit festgelegter Breite gelöst werden. Wenn für die TD-Spalte jedoch keine Breite festgelegt ist, wird dies nicht wirksam oder TD wird beschädigt. Wie soll das Problem gelöst werden?

Die Lösung für dieses Problem lautet: Fügen Sie beim Definieren der Tabelle style="table-layout:fixed;" hinzu. Dadurch wird ein Umbruch aufeinanderfolgender Zeichen halber Breite erzwungen und die Spaltenbreite wird nicht unterbrochen. Zu beachten ist, dass nach der Verwendung dieses Parameters nicht ohne weiteres das Height-Attribut zu tr (Zeile) bzw. td (Spalte) hinzugefügt werden darf, da sonst die Tabelle durch den Inhalt nicht mehr auf die entsprechende Höhe gestreckt wird.

Beispiel:

<table width="95%" border="1" cellpadding="2" cellspacing="1" style="table-layout:fixed;">
  …
</Tabelle> 

Diese Methode ist auf die Browser IE und FireFox anwendbar.

Dies ist das Ende dieses Artikels über adaptive Breitentabellen auf HTML-Seiten. Weitere Informationen zu adaptiven Breitentabellen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!