HTML Dog
Skip to navigation

Fixed table layout

Set using the table-layout property.

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Fixed table layout</title>
	<style>
		table {
			border-collapse: collapse;
			table-layout: fixed;
			width: 100%;
		}

		td, th {
			border: 1px solid #999;
			padding: 0.1em 1em;
		}

		.alternative {
			background-color: #ddf;
		}
	</style>
</head>
<body>
	<table>
		<caption>Animal groups</caption>
		<colgroup>
			<col span="3">
			<col class="alternative">
			<col>
		</colgroup>
		<tr>
			<th>Apes</th>
			<th colspan="2">Cats</th>
			<th style="background: #ddf;">Dogs</th>
			<th>Lemurs</th>
		</tr>
		<tr>
			<td>Gorilla</td>
			<td>Tiger</td>
			<td>Cheetah</td>
			<td style="background: #ddf;">Grey Wolf</td>
			<td>Indri</td>
		</tr>
		<tr>
			<td>Orangutan</td>
			<td>Lion</td>
			<td>Puma</td>
			<td style="background: #ddf;">Cape hunting dog</td>
			<td>Sifaka</td>
		</tr>
		<tr>
			<td>Man</td>
			<td>Jaguar</td>
			<td>Serval</td>
			<td style="background: #ddf;">Very silly big long-long named dog woof</td>
			<td>Red ruffed lemur</td>
		</tr>
		<tr>
			<td>Chimpanzee</td>
			<td>Leopard</td>
			<td>Caracal</td>
			<td style="background: #ddf;">Red Fox</td>
			<td>Ring tailed lemur</td>
		</tr>
		<tr>
			<td>Bonobo</td>
			<td>Snow leopard</td>
			<td>Wild cat</td>
			<td style="background: #ddf;">Fennec</td>
			<td>Dwarf lemur</td>
		</tr>
	</table>

	<!-- Link back to HTML Dog: -->
	<p><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p>
</body>
</html>

Output

View original