Блог Кати Куликовой

Кто бы мог подумать, что такая простейшая вещь, как рамки (borders) для пустых ячеек внутри таблицы, не работает в IE 6. А может быть и в других IE тоже, этого я не знаю, не было возможности проверить… Но это, конечно, возмутительно.

Итак, у нас есть таблица, в которой некоторые ячейки заполнены, а некоторые пусты. Ее html-код таков:

<table>
<tr>
<td>item 1,1</td><td></td><td>item 1,3</td>
</tr>
<tr>
<td></td><td>item 2,2</td><td>item 2,3</td>
</tr>
</table>

Добавляем стили, чтобы отрисовать границы всех ячеек в таблице (в том числе и внутренних):

table
{
border-color: #600;
border-width: 0 0 1px 1px;
border-style: solid;
}
td
{
border-color: #600;
border-width: 1px 1px 0 0;
border-style: solid;
margin: 0px;
padding: 4px;
text-align: center;
empty-cells:show;
}

И видим вот такую картинку:

Конечно, это не совсем то, что хотелось бы. Идем в Google и находим, что нужно применить к table и td свойство empty-cells: show;. Отлично! Добавляем его в стили и видим, что это ничего не изменило для Internet Explorer 6. Но более приятная картинка теперь в Mozilla Firefox 2.0.*:

А это небольшое уточнение для IE, которое заодно сделает все границы ровными и без разрывов, я нашла на Accessify Forum.

В свойства table добавляем строчку border-collapse:collapse; и видим прелестную картинку в обоих браузерах:

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

Итак, для исходной таблицы получаем следующий CSS в результате:

table
{
border-color: #600;
border-width: 0 0 1px 1px;
border-style: solid;
empty-cells: show;
border-collapse:collapse;
}
td
{
border-color: #600;
border-width: 1px 1px 0 0;
border-style: solid;
margin: 0px;
padding: 4px;
text-align: center;
}

Вот и все мои изыскания по этому вопросу. HTML и CSS — это все-таки какая-то магия.