CSS/Eigenschaften/Tabellenformatierung/table-layout

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit der Eigenschaft table-layout können Sie festlegen, wie Angaben zur Breite einzelner Tabellenelemente interpretiert werden.

  • IE
  • Firefox
  • Chrome
  • Safari
  • Opera
  • CSS 2.0
Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>table-layout</title>
    <style>
      table {
        width:100%;
      }
      td {
        border:1px solid;
        overflow:hidden;
        vertical-align:top;
      }
    </style>
  </head>
  <body>
    <h1>Verwendung von <code>table-layout</code></h1>
    <main>
      <h2>table-layout:auto ohne Breitenangabe</h2>
      <table>
        <tr>
          <td>ohne Breitenangabe</td>
          <td>ohne Breitenangabe</td>
          <td>ohne Breitenangabe - Spalten mit höherem
            Platzbedarf wird mehr Breite zur Verfügung
            gestellt, wenn andere Spalten diese für eine
            vollständige Darstellung ihrer Inhalte nicht
            benötigen.
          </td>
        </tr>
      </table>
      <h2>table-layout:fixed ohne Breitenangabe</h2>
      <table style="table-layout:fixed">
        <tr>
          <td>ohne Breitenangabe</td>
          <td>ohne Breitenangabe</td>
          <td>ohne Breitenangabe - Der verfügbare Platz wird
            unabhängig vom Inhalt der Zellen auf alle
            Spalten gleichmäßig aufgeteilt.
          </td>
        </tr>
      </table>
      <h2>table-layout:fixed mit teilweiser Breitenangabe</h2>
      <table style="table-layout:fixed">
        <tr>
          <td style="width:25%"><code>width: 25%</code></td>
          <td style="width:120px"><code>width: 120px</code>
            Donaudampfschifffahrtsgesellschaft
          </td>
          <td>ohne Breitenangabe - Noch verfügbarer Platz
            wird auf alle Spalten ohne Breitenangabe
            aufgeteilt. Zu breiter Inhalt wird, wie in der
            mittleren Spalte dargestellt, abgeschnitten,
            wenn overflow:hidden definiert wurde.
          </td>
        </tr>
      </table>
      <h2>table-layout:fixed mit Breitenangabe in allen Spalten</h2>
      <table style="table-layout:fixed">
        <tr>
          <td style="width:25%"><code>width: 25%</code></td>
          <td style="width:25%"><code>width: 25%</code></td>
          <td style="width:25%"><code>width: 25%</code> - Ist
            die Breite der gesamten Tabelle größer, als von
            allen Spalten gemeinsam benötigt wird, wird
            verfügbarer Platz zu gleichen Teilen auf alle
            Spalten aufgeteilt. In diesem Beispiel beträgt
            die Breite jeder Spalte daher effektiv 33% statt
            der definierten 25%.
          </td>
        </tr>
      </table>
    </main>
  </body>
</html>

Die Eigenschaft table-layout kann zwei Werte annehmen;

  • auto: (Standardwert) Angabe einer Breite für eine Tabellenspalte wird als Mindestbreite interpretiert. Fehlen Breitenangaben, so wird der zur Verfügung stehende Platz in Abhängigkeit vom Inhalt auf die einzelnen Tabellenspalten aufgeteilt.
  • fixed: Bei fehlenden Breitenangaben erhalten die Tabellenspalten die gleiche unveränderliche (fixe) Breite. Falls es notwendig und möglich ist, wird der Inhalt umgebrochen; ist dies nicht möglich, so wird in Abhängigkeit vom Wert der overflow-Eigenschaft der Inhalt abgeschnitten (overflow: hidden;), oder er geht einfach über die Zellbegrenzung hinaus.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML