Посоветуйте структуру виджета

[Evkaky]

Задача: представить текстовые данные в табличном виде. НО. У каждой колонки в таблице должна быть возможность сплюснуться по ширине в 0, даже не сплюснуться, а как бы уехать (т.е должна быть анимция) в сторону (допустим, влево) под соседнюю колонку, спрятаться под нее. И соответственно, все колонки идущие после той, которую мы только что скрыли - подъедут влево и займут ее место, дабы не образовывать дырку в таблице.

Что-то я начал приходить к выводу, что верстая все это дело на <table> будет невозможно создать эффект выежания/заежания колонки под близ стоящую колонку. В таблице даже невозможно просто сплюснуть ширину <td> в 0, если в этой ячейке есть контент. Ширина тупо упрется так, что бы вместить весь контент, и ни на пх меньше не станет, что бы я там не задавал ей в цсс. table-layout: fixed никак не помогает тут.

В общем, с учетом всего вышеперечисленного, мне кажется, что лучше всего будет сверстать это дело на флексбоксах, как думаете?

[antonKar]

В общем, с учетом всего вышеперечисленного, мне кажется, что лучше всего будет сверстать это дело на флексбоксах, как думаете?

А что, div с float: left и overflow: hidden (чтобы скрывать контент у блоков шириной в 0 пикселей) уже не православно?

[Evkaky]

А что, div с float: left и overflow: hidden (чтобы скрывать контент у блоков шириной в 0 пикселей) уже не православно?

Уже нет. Да и зачем они, если есть флексбокс?

overflow: hidden мне мешать будет, а прописывать каждому контейнеру с флоатом псевдоэлемент с clear: both - не торт.

Вы пролейте свет на описанные мною проблемы с таблицей, может все-таки возможно в ней делать такие трюки со столбцами?

Edited July 21, 2013 by Evkaky

[antonKar]

Да и зачем они, если есть флексбокс?

А IE9, IE8 и Opera 12.0 мы на мороз выкидываем?

overflow: hidden мне мешать будет

Тогда у блока с нулевой шириной будет виден контент.

а прописывать каждому контейнеру с флоатом псевдоэлемент с clear: both - не торт

Это ещё зачем? Родительскому элементу только навесить clearfix и всё, чтобы с высотой всё нормально было.

а как бы уехать (т.е должна быть анимция) в сторону (допустим, влево) под соседнюю колонку, спрятаться под нее

Как вариант можно контент внутри ячейки оборачивать в div и этому диву задавать отрицательный marginLeft с анимацией. А td проставить ширину в 0 сразу перед началом анимации.

[Evkaky]

Как вариант можно контент внутри ячейки оборачивать в div и этому диву задавать отрицательный marginLeft с анимацией. А td проставить ширину в 0 сразу перед началом анимации.

Благодарю, вариант с дополнительным дивом внутри ячеек и манипуляции именно с этими дивами - работает!

А IE9, IE8 и Opera 12.0 мы на мороз выкидываем?

Ну обновить браузер - это пару щелчков мышью, так что да, выкидываем их на свалку к ИЕ6, ИЕ5!

[antonKar]

Ну обновить браузер - это пару щелчков мышью, так что да, выкидываем их на свалку к ИЕ6, ИЕ5!

Везёт вам, у меня за такое на свалку буду выброшен я

[Catherine]

У каждой колонки в таблице должна быть возможность сплюснуться по ширине в 0

http://jsfiddle.net/Cath_kb/r3vGS/

а как бы уехать (т.е должна быть анимция) в сторону (допустим, влево) под соседнюю колонку, спрятаться под нее

http://jsfiddle.net/Cath_kb/r3vGS/1/

Похоже?

[Evkaky]

Похоже?

Да, похоже, но при таком подходе появляются след. пробемы (которых нету при использовании <table>):

1) ховер на строках одной строчкой цсс уже не сделать. Мне кажется, через цсс его вообще тут не сделать, только жсом

2) стандартный функционал столбца в таблице, т.е. ширина всех ячеек в конкретном столбце будет тянуться в зависимости от ширины ячейчки с самым длинным контентом