Создание структуры таблицы с помощью свойства table-layout.
<!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>
</body>
</html>Страницы в тему:
