Закрепляем размер ячеек 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;  }