ТАБЛИЦА более широкая, чем содержащая DIV

В приведенном ниже примере также доступна здесь, как WebKit (Safari 5, Chrome 10.0.648.205), так и Mozilla (FF 4) сохраняют DIV div вокруг видимой ширины окна браузера, тогда как ТАБЛИЦА имеет такое же широкое значение, как и его содержимое.

Я бы ожидал, что DIV будет расширяться так же широко, как и TABLE, но поскольку поведение согласовано между браузерами, я подозреваю, что это скорее функция, чем ошибка.

Интересно, что если у DIV установлено значение float: left, оно растет так же широко, как таблица.

Любые объяснения?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Wide Table</title>
<style>

#container {
    background-color:blue;
/*    float:left;*/
}

</style>
</head>
<body>
  <div id="container">
    <table >
       <tr id="tr">
         <td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td><td>Table&nbsp;Cell</td>
       </tr>
    </table>
  </div>
</body>
</html>

Ответ 1

Элементы блока берут ширину своего родителя по умолчанию, а не ширину их содержимого; высота с другой стороны, работает наоборот: элементы блока занимают высоту своего содержимого по умолчанию, а не высоту их родителя. Все работает так, потому что HTML/CSS построен вокруг обычного макета текста сверху вниз.

Итак, ваш #container принимает ширину <body>, а затем <table> внутри #container переполняется вне #container. Если вы положите overflow: hidden на #container, вы закроете <table>, overflow-x: auto; на #container, добавив полосу прокрутки.

ОБНОВЛЕНИЕ. Что касается плавающих элементов, то спецификация CSS3 говорит следующее:

Используемое значение "width" - это вычисленное значение, если только это не является "auto", когда используемое значение представляет собой ширину усадки для соответствия.

Ширина по умолчанию будет автоматической, поэтому shrink-to-fit:

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

В вашем <table> нет возможных разрывов строк, поэтому плавающий #container будет принимать всю ширину своего дочернего элемента <table>.

Ответ 1

Ответ 2