div внутри td, но td неожиданно расширен - PullRequest
Новая
       9

div внутри td, но td неожиданно расширен

0 голосов
/ 20 августа 2009 
<td>
<div id="test">...</div>
</td>
<td>
.....
</td>

Я могу видеть из firebug, что td примерно на 40px шире, чем div "test" (ширина + граница + поле все включено), но нет стиля css, который бы это делал (без настройки ширины, отступов)!

Почему здесь "td" не такой широкий, как div?

Я сейчас жестко программирую, чтобы td to9 был таким же широким, как "тестовый" div, но чувствую себя некомфортно.

1 Ответ

3 голосов
/ 20 августа 2009

Без остальной части вашего кода я выхожу здесь на конечность, но <td> автоматически изменит размер в зависимости от ширины таблицы / количества столбцов в таблице. Если вашей таблице не назначена явная ширина, она расширится до 100% ширины своего контейнера или родительского элемента. Вы можете чувствовать себя комфортно, избегая этого, задав явную ширину таблицы или ячейки таблицы по мере необходимости.

В следующем сценарии каждый столбец будет автоматически изменен на размер таблицы / количество столбцов или в этом случае 400/4 = 100. Таким образом, каждый столбец будет иметь ширину 100 пикселей. 

<table style="width:400px">
<td></td>
<td></td>
<td></td>
<td></td>
</table>

В зависимости от браузера в этом сценарии возможны два результата. 1. Таблица расширится до 100% ширины своего родителя, или 600 пикселей здесь. Это означает, что каждый столбец будет автоматически иметь ширину до 150 пикселей. 2. Таблица и столбцы могут расширяться до ширины самого широкого дочернего элемента в своей группе столбцов. 

<body style="width: 600px"> <!-- Could be a div or other element here -->
<table>
<td></td>
<td></td>
<td></td>
<td></td>
</table>
</body>

Спецификацию WC3 можно найти здесь и предоставляет некоторые подробные сведения о том, как браузеры предполагают для реализации спецификации HTML 4.01 в отношении таблиц.

...