Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Table - как избавиться от автоматич. уменьшения ширины при уменьшении размера экрана? (https://javascript.ru/forum/xhtml-html-css/48891-table-kak-izbavitsya-ot-avtomatich-umensheniya-shiriny-pri-umenshenii-razmera-ehkrana.html)

eugen35 21.07.2014 10:26

Table - как избавиться от автоматич. уменьшения ширины при уменьшении размера экрана?
 
Вот ссылка на мой код, где можно всё попробовать:
http://jsfiddle.net/KT5TC/1/

Table - как избавиться от автоматического уменьшения ширины таблицы при уменьшении размера родит. элемента?

Менять ширину элемента можно, наведя мышь на правый его край, далее - зажимаете левую кнопку мыши и меняете размер элемента.

1. Попробуйте уменьшить размер внешнего div (двойная рамка) меньше ширины таблицы - таблица начнёт сжиматься.
Тот же эффект Вы достигнете если просто будете уменьшать размер окна браузера.

2. Попробуйте увеличить размер СТОЛБЦА таблицы (хочу менять именно ширину столбцов и чтобы край таблицы при этом менялся автоматически - для таблицы я не задаю WIDTH). Если Вы увеличиваете его так, что край таблицы достигает края внешнего div, то ширина столбца начинает увеличиваться, а таблица пытается остаться на странице полностью, уменьшая ширину других столбцов).

3. Примечательно, что розовый div ведёт себя вполне корректно - если все те же действия применить к нему.

http://jsfiddle.net/KT5TC/ - здесь розовый див шире таблицы, чтобы Вы увидели его поведение.


ВОПРОС: МНЕ ОЧЕНЬ НУЖНО ЧТОБЫ ТАБЛИЦА ВЕЛА СЕБЯ КАК РОЗОВЫЙ ДИВ В ОБОИХ СЛУЧАЯХ! А именно если она по АВТОМАТИЧЕСКОЙ ширине должна стать больше родительского элемента - чтобы становилась и при этом становилась активной полоса прокрутки. И НЕ ИСПОЛЬЗОВАТЬ ДЛЯ ЭТОГО ДОПОЛНЕНИЯ В JS-коде!

Можно ли вообще это сделать вёрсткой (css + html)?

hfts_rider 22.07.2014 09:59

У розового дива фиксированная ширина! (width:350px)

Ты же сам это написал.
Если тебе нужно что бы таблица не меняла ширину, нужно или задать width или min-width или конкретный размер ячеек.

eugen35 31.07.2014 09:35

Там видз скриптом задаётся - т.е. сперва его не было, но как только столбец расширяем или уменьшаем- видз устанавливается. При этом таблица всё равно себя безобразно ведёт, на что, собственно, я и жаловался. А вот мин-видз и макс-видз помогло. Но изначально этого не хотел - не хотел менять универсальный скрипт резайс. Впрочем, у всех элементов есть есть мин-видз и макс-видз и поэтому, когда переписал резайс-скрипт (на основе мин-видз и макс-видз) - вроде универсально работает и с дивами и т.п.
Промежуточное решение было - пихнуть в каждый заголовок столбца по диву (поскольку дивы изначально себя правильно ведут). Но такое решение тоже изначально не рассматривал, поскольку это привносит в вёрстку семантически ненужные элементы....

cha0s 01.08.2014 19:15

http://jsfiddle.net/KT5TC/17/

eugen35 22.08.2014 09:39

Простите, не увидел разницы в поведении таблицы. По крайней мере, ещё ширину не удаётся утащить за внешний див - см. пункт 2.

Решение найдено - смотрите: http://jsfiddle.net/KT5TC/15/.

hfts_rider 22.08.2014 12:25

Тебе просто нужно задать min-width для таблицы, она не будет уменьшаться тогда.


Часовой пояс GMT +3, время: 03:01.