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

#html #css

#HTML #css

Вопрос:

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

Я ожидал бы, что DIV будет расти так же широко, как и ТАБЛИЦА, но поскольку поведение согласовано во всех браузерах, я подозреваю, что это особенность, а не ошибка.

Интересно, что если для 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>Tableamp;nbsp;Cell</td><td>Tableamp;nbsp;Cell</td><td>Tableamp;nbsp;Cell</td><td>Tableamp;nbsp;Cell</td><td>Tableamp;nbsp;Cell</td><td>Tableamp;nbsp;Cell</td><td>Tableamp;nbsp;Cell</td><td>Tableamp;nbsp;Cell</td><td>Tableamp;nbsp;Cell</td><td>Tableamp;nbsp;Cell</td><td>Tableamp;nbsp;Cell</td><td>Tableamp;nbsp;Cell</td><td>Tableamp;nbsp;Cell</td><td>Tableamp;nbsp;Cell</td><td>Tableamp;nbsp;Cell</td><td>Tableamp;nbsp;Cell</td><td>Tableamp;nbsp;Cell</td><td>Tableamp;nbsp;Cell</td><td>Tableamp;nbsp;Cell</td><td>Tableamp;nbsp;Cell</td>
       </tr>
    </table>
  </div>
</body>
</html>

1. Ваш вопрос ответил на мой вопрос! Плавающий «рост» — это то, что я искал. Настройка отображения на встроенный блок также работает, и это то, на чем я в конечном итоге остановился.

Ответ №1:

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

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

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

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

Ширина по умолчанию будет автоматической, так что усадка по размеру будет:

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

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

1. И float, как и встроенный блок и ячейка таблицы, использует алгоритм «усадки по размеру» , который просматривает содержимое для вычисления ширины контейнера

2. @Youval: Похоже, вы перешли на стандарт до моего обновления. Я добавил несколько ссылок на рабочий проект CSS3 для потомков.

Ответ №2:

Обычно я устанавливаю размер div и позволяю таблице самой подстраиваться под div. Не уверен, поможет ли это понимание или нет.