Установка ширины ячеек таблицы с помощью CSS - PullRequest
Новая
       40

Установка ширины ячеек таблицы с помощью CSS

0 голосов
/ 30 мая 2011

У меня есть HTML-таблица, в которой я должен установить общую ширину и хочу убедиться, что столбец меток не становится слишком широким.

Он работает, как и ожидалось, в Firefox 4, но IE 9 кажется полностьюигнорировать свойство with. 

<html>
<head>
<style type="text/css">
table,th,td { border: solid 1px; border-collapse: collapse; }
th.caption { width: 700px; }
.label { width: 100px; }
</style>
</head>
<body>

<table>
<tr><th class="caption" colspan=2>Caption</th></tr>
<tr><td class="label">Label</td><td>Stuff...</td></tr>
<tr><td class="label">Label</td><td>Stuff...</td></tr>
</table>

</body>
</html>

1 Ответ

4 голосов
/ 30 мая 2011
  • Добавьте <!DOCTYPE html> в качестве первой строки для получения режима стандартов (не имеет прямого отношения к вашей проблеме, но вам определенно следует это делать, если вам не нравится, что IE9 претендует на IE5 - Режим причуда ).
  • Установите общую ширину таблицы на table вместо th.caption.

См .: http://jsbin.com/icafo3

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table,th,td { border: solid 1px; border-collapse: collapse; }
table { width: 700px; }
.label { width: 100px; }
</style>
</head>
<body>

<table>
<tr><th class="caption" colspan=2>Caption</th></tr>
<tr><td class="label">Label</td><td>Stuff...</td></tr>
<tr><td class="label">Label</td><td>Stuff...</td></tr>
</table>

</body>
</html>
...