Меню
Что нового?

Таблица, при вставке контента болтается ширина ячеек...

Qwerty

Новичок
Таблица, при вставке контента болтается ширина ячеек...

Имеется такой код:
PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><body>
<table style="width:600px;border-collapse:collapse;border-width:0px;border:1px solid black;">
<tr>
<td style="width:400px;background:#fcc;">cell1</td>
<td style="width:200px;background:#cfc;">cell2</td>
</tr><tr>
<td colspan="2">
content 
</td>
</tr></table>
</body></html>
Ширину ячеек хочется иметь фиксированной. Но при вставке объемного текста вместо content ширина верхних ячеек начинает плыть: левая уменьшается за счет правой... Происходит это только в IE. Mozilla и Opera ширину ячеек не меняют.
Не могу понять в чем дело, как зафиксировать ширину ячеек? Стилями.
 

Qwerty

Новичок
RUNET
HraKK
Вы о чем? При чем здесь разрыв строк?
Может я неясно выразился? Всё должно переноситься, но внутри ячеек указанной ширины. Дело в том, что ширина меняется в пределах 10-20 пикселов, больше похоже на глюк, чем на осознанное изменение, учитывая, что Опера и Мозилла кажут нормально.

-~{}~ 21.09.07 07:03:

Scud
О, отлично, это помогло (на этом тестовом примере)!
Попробую на реальной верстке.
Спасибо!

-~{}~ 21.09.07 08:25:

Так... С table-layout:fixed возникла другая странность... Причем, на этот раз, все браузеры проявили единодушие.
Дело в том, что теперь игнорируется указанная ширина ячеек 4 и 5, они становятся одинаковой ширины, равной половине ячейки 2...

Это http://loc.stack.ru/projects/CSS2/tables.html#width-layout читал, там написано:

При использовании алгоритма фиксированного расположения таблицы ширина каждого столбца определяется следующим образом:
1. Элемент столбца со значением свойства 'width', отличным от 'auto', определяет ширину этого столбца
...

Т.е., если ширина явно указано, столбец должен быть этой ширины?

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><body>
<table style="width:600px;border-collapse:collapse;border-width:0px;border:1px solid black;table-layout:fixed;">
<tr>
<td style="width:400px;background:#fcc;">cell1</td>
<td style="width:200px;background:#cfc;" colspan="2">cell2</td>
</tr><tr>
<td style="width:400px;background:#ffc;">cell3</td>
<td style="width:150px;background:#fcf;">cell4</td>
<td style="width:50px;background:#cff;">cell5</td>
</tr><tr>
<td colspan="3">
content
</td>
</tr></table>
</body></html>
P.S. Сколько таблиц переделал, первый раз такое... :(
 

VladiT

Новичок
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><body>
<table style="width:600px;border-collapse:collapse;border-width:0px;border:1px solid black; table-layout:auto;">
<tr>
<td style="width:400px;background:#fcc;">cell1</td>
<td style="width:200px;background:#cfc;" colspan="2">cell2</td>
</tr><tr>
<td style="width:400px;background:#ffc; ">cell3</td>
<td style="width:150px;background:#fcf;">cell4</td>
<td style="width:50px;background:#cff;">cell5</td>
</tr><tr>
<td colspan="3">
<div style="overflow:hidden; width:600px">
content
</div>
</td>
</tr></table>
</body></html>
 

Qwerty

Новичок
Сработало, спасибо!
А можно спросить, чем вызван такой эффект от применения этих стилей? Что-то я не совем понимаю...
 
Войдите или зарегистрируйтесь для ответа.
Сверху