Ширина таблицы

[pers_tmb]

Добрый день! 

 

Задача у меня сделать большую таблицу. Для удобства таблицу поместил в div с условными свойствами { width: 500px; overflow: scroll; }. В таблице есть, например, 3 столбца со свойством td { width: 300px; }. По логике, ширина таблицы в таком случае должна автоматически принять значение 900px, а полосы прокрутки divа должны стать активными. Но почему-то ширина таблицы упирается в 500px, если только её ширину принудительно не задать.

 

Подскажите, пожалуйста, в чём проблема и как из ситуации выпутаться? 

[Great Rash]

Хм... занятно. Я вот так победил: http://codepen.io/GreatRash/pen/awClt

[pers_tmb]

Спасибо, Great Rash!

Мне это решение подошло.

[SelenIT]

А просто min-width для ячейки недостаточно?

[amelice]

А просто min-width для ячейки недостаточно?

а почему возникает необходимость ввести min-width?  почему таблица не подстраивается к ширине  потомков?

[Great Rash]

А просто min-width для ячейки недостаточно?

Кстати да, не подумал как-то об этом

[SelenIT]

почему таблица не подстраивается к ширине потомков?

Вопрос, конечно, интересный

 

Вообще раздел про таблицы в CSS2.1 написан так, что черт ногу об голову сломит. В п. 17.5.2.1 (ширина при table-layout:fixed) говорится, что

A value of 'auto' (for both 'display: table' and 'display: inline-table') means use the automatic table layout algorithm. However, if the table is a block-level table ('display: table') in normal flow, a UA may (but does not have to) use the algorithm of 10.3.3 to compute a width and apply fixed table layout even if the specified width is 'auto'.

 

Значение <width> 'auto' (как для 'display: table', так и для 'display: inline-table') означает использование автоматического алгоритма раскладки таблицы. Однако, если таблица является блочной ('display: table') в нормальном потоке, браузер может (но не обязан) использовать алгоритм из 10.3.3 для расчета ширины и использовать фиксированный алгоритм раскладки таблицы, даже если указана ширина 'auto'.

 

Алгоритм из 10.3.3 как раз предписывает вписать блок в ширину контейнера.

 

С другой стороны, при автоматическом алгоритме (п. 17.5.2.2),

UAs are not required to implement this algorithm to determine the table layout in the case that 'table-layout' is 'auto'; they can use any other algorithm even if it results in different behavior.

 

Браузеры не обязаны реализовывать этот алгоритм для определения раскладки таблицы в случае, когда 'table-layout' имеет значение 'auto'; они могут использовать любой другой алгоритм, даже если его результатом будет другое поведение.

 

В общем, анархия — мать порядка, как нередко бывает у W3C. Хорошо, что браузеры хотя бы оглядываются друг на друга и мало-мальски приводят это нерегламентированное поведение к какому-то общему знаменателю.

 

А вообще реальное поведение таблиц — хорошая тема для исследования, будет чем заняться на досуге...

[amelice]

 Алгоритм из 10.3.3 как раз предписывает вписать блок в ширину контейнера.

Это похоже на то, что не хотят заморачиваться с расчетом ширины таблицы. Либо задавай конкретное значение, а если нет то ее ширина  = ширине родителя.

Если так , то конечно работает. http://codepen.io/amelice/pen/Lolku

 

приводят это нерегламентированное поведение

А это для меня новость  

http://codepen.io/amelice/pen/Jcvao

Половина бордера со всех четырех сторон выпадают под маргин? Вроде ячейка не может иметь маргина?

[SelenIT]

Половина бордера со всех четырех сторон выпадают под маргин? Вроде ячейка не может иметь маргина?

Ячейка не может. А у таблицы, да, по тому алгоритму из спеки, который браузеры не обязаны соблюдать (и не соблюдают) — теоретически должны были выпадать.

 

Кстати, у меня в Fx в примере наблюдается забавный баг — вертикальные border-ы между ячейками при 100%-ном масштабе на пиксель отстают от верхнего, при любой их толщине, большей 1px. Ох и намудрили спекописцы/браузероделы с этими таблицами, ох и намудрили...

[amelice]

А у таблицы, да, по тому алгоритму из спеки, который браузеры не обязаны соблюдать (и не соблюдают) — теоретически должны были выпадать.

Совсем запутано, если это маргин, то почему черного цвета(что вообще не возможно-ведь маргины прозрачные)?

[SelenIT]

Это бордер. Но по необязательному алгоритму из спеки он должен был наполовину выступать за габариты самой таблицы, как бы в область маргина (при border-collapse:collapse). А может, и не должен был — сейчас посмотрел раздел 17.6.2, там речь идет о «row width», а не «table width»… ох и запутанная эта спека! Еще раз спасибо за стимул разобраться в этом массаракше

[amelice]

И тебе спасибо