Beispiel:CSS2 table-layout.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!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>