Фиксирование ширины ячейки с полями

Автор статьи: Азат Разетдинов

Использовать или нет таблицы для вёрстки страниц — дело вкуса каждого верстальщика. Авторы сайта positioniseverything.com героически пытаются решить старую проблему: сверстать страницу в три колонки без помощи таблиц, при этом снова и снова натыкаясь на глюки браузеров. В то время как рядовые верстальщики со вздохом набирают <table>. Но даже такой годами испытанный инструмент, как таблица, иногда создаёт проблемы.

Задача: создать таблицу из трёх колонок шириной в 100px, 70% и 30% соответственно. Все колонки должны иметь поля в 10px. Дополнительные условия: минимум HTML, максимум CSS. В тестировании участвуют Internet Explorer 6, Mozilla FireFox 1.5, Opera 8.

CSS:
table { border-collapse: collapse; width: 100%; }
td { padding: 10px; }
td#one { background: red; width: 100px; }
td#two { background: green; width: 70%; }
td#three { background: blue; width: 30%; }

HTML:
<table>
<tr>
<td id="one">one</td>
<td id="two">two</td>
<td id="three">three</td>
</tr>
</table>

Результат (1):

Во всех трёх браузерах ширина первой ячейки игнорируется, т. к. ужимается соседними колонками. Можно, конечно, поставить распорку, но мы ведь с Вами стремимся к минимализму в HTML, правильно? Тем более, что в запасе есть шикарное свойство CSS table-layout:

table { border-collapse: collapse; table-layout: fixed; width: 100%; }

Получаем (2):

Что за чертовщина? В Mozilla и Opera ширина первой колонки увеличилась на размер полей и составила 120px.

Попробуем применить свойство box-sizing:

td { box-sizing: border-box; -moz-box-sizing: border-box; padding: 10px; }

Не помогло (3):

Этот баг присутствует во всех трёх браузерах. В IE его можно побороть, выставив table-layout: fixed; (что мы и сделали чуть выше). В Mozilla и Opera для этой цели необходимо задать ширину ячейки в элементе col, при этом убрав её из определения td.

CSS:
table { border-collapse: collapse; table-layout: fixed; width: 100%; }
col#c_one { width: 100px; }
col#c_two { width: 70%; }
col#c_three { width: 30%; }
td { padding: 10px; }
td#one { background: red; }
td#two { background: green; }
td#three { background: blue; }

HTML:
<table>
<col id="c_one" />
<col id="c_two" />
<col id="c_three" />
<tr>
<td id="one">one</td>
<td id="two">two</td>
<td id="three">three</td>
</tr>
</table>

Выходит (4):

Всё? Почти. В Opera первая колонка всё-таки чуть шире установленного значения на пару пикселей. Я долго искал, откуда они могли появиться. Наконец нашёл виновника. Вы не поверите, им оказался не обнулённый HTML-атрибут cellpadding. Причём выставление padding: 0 в CSS для всех ячеек не решает проблемы.

CSS:
table { border-collapse: collapse; table-layout: fixed; width: 100%; }
col#c_one { width: 100px; }
col#c_two { width: 70%; }
col#c_three { width: 30%; }
td { padding: 10px; }
td#one { background: red; }
td#two { background: green; }
td#three { background: blue; }

HTML:
<table cellpadding="0">
<col id="c_one" />
<col id="c_two" />
<col id="c_three" />
<tr>
<td id="one">one</td>
<td id="two">two</td>
<td id="three">three</td>
</tr>
</table>

Итоговый вариант (5):

Используйте на здоровье!

Автор статьи: Азат Разетдинов

Примечание автора сайта. Автор статьи рассматривает Internet Explorer 6 в Quirks mode. Если же у вас, как и у меня, указан DOCTYPE, приводящий IE в Standards compliance mode, то вам необходимо остановиться на варианте 2. Но при этом вам нужно учесть W3C box model и в CSS указать td#one { background: red; width: 80px; }, а не td#one { background: red; width: 100px; }.