Фиксируем размер ячеек HTML таблицы с помощью CSS3

Фиксированный размер ячеек через CSS

Если в процессе создания таблицы, вам необходимо зафиксировать размер ячеек в определенном столбце, то с помощью третьей версии CSS это достаточно легко сделать. В интернете довольно часто предлагают методы с использованием colspan, или указанием размера ячейки прямо в её теге (пример: <td width="123px">). С помощью CSS все это можно сделать гораздо легче.

И так, допустим у нас есть таблица со списком исполнителей электронной музыки:

<table>
<tr><td>Kraftwerk</td><td>1969</td><td>Германия</td></tr>
<tr><td>Deutsch Amerikanische Freundschaft</td><td>1978</td><td>Германия</td></tr>
<tr><td>Front 242</td><td>1981</td><td>Бельгия</td></tr>
</table>

На данный ширина всех столбцов будет определяться браузером клиента автоматически, чего собственно мы и хотим избежать. Поможет нам в этом следующий CSS код:

table {
	table-layout:fixed; width:450px;
}
table td {
	overflow:hidden;
}
table td:nth-of-type(1) {
	width:200px;
}
table td:nth-of-type(2) {
	width:75px;
}
table td:nth-of-type(3) {
	width:175px;
}

Как можно догадаться, table td:nth-of-type(1), table td:nth-of-type(2) и table td:nth-of-type(3) содержат цифры колонок, а параметр width отвечает за их ширину.

Важный совет - если у вашей таблицы задан свой определенный класс, то лучше использовать его в таблице CSS, потому что в противном случае данные размеры применятся на любые таблицы, которые расположены на страницах, где используется данный css файл. Допустим, у вашей таблицы следующий код, в котором видно, что класс таблицы - music:

<table class="music">
<tr><td>Kraftwerk</td><td>1969</td><td>Германия</td></tr>
<tr><td>Deutsch Amerikanische Freundschaft</td><td>1978</td><td>Германия</td></tr>
<tr><td>Front 242</td><td>1981</td><td>Бельгия</td></tr>
</table>

То и CSS код должен быть следующим:

table.music {
	table-layout:fixed; width:450px;
}
table.music td {
	overflow:hidden;
}
table.music td:nth-of-type(1) {
	width:200px;
}
table.music td:nth-of-type(2) {
	width:75px;
}
table.music td:nth-of-type(3) {
	width:175px;
}

И еще одна важная деталь - если в вашей таблице используется заголовок вида <thead>, то для его ячеек <th> придется так же прописывать ширину, как и для ячеек <td>, в противном случае этот способ не будет работать. Т. е. теперь CSS будет выглядеть вот так:

table.music {
	table-layout:fixed; width:450px;
}
table.music td,
table.music th {
	overflow:hidden;
}
table.music td:nth-of-type(1),
table.music th:nth-of-type(1) {
	width:200px;
}
table.music td:nth-of-type(2),
table.music th:nth-of-type(2) {
	width:75px;
}
table.music td:nth-of-type(3),
table.music th:nth-of-type(3) {
	width:175px;
}