Beispiel:CSS2 table-layout.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<title>table-layout</title>
<style>
table {
background: white;
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>