Верстка, CSS, HTML, SVG

Адаптивные таблицы на CSS. Частично решено, но знаний довести до конца не хватает. Подскажите...

Уже прочла, что решить сие очень сложно. Но, может, быть, кто-то такие штуки делает? Специалисты, ау!

Появилась необходимость в табличном представлении части информации на сайте. Данных много, обновляются 7 раз в день.

Частично решила задачу адаптивности по найденному в сети примеру - перестраиванию представления данных в строчный режим (при медиа min-width 980 и меньше). но до этого момента таблица в своем обычном табличном представлении никак не "ужимается" (в предыдущих версиях html таких проблем не было, таблицы "адаптировались" автоматически.)

Видела на stackoverflow точка com подобную тему. Но мне не подойдет такой вариант, у меня не 2 столбца, а 17, замучаешься классы присваивать 7 раз в день.

Сейчас у меня отлично адаптируется пустая таблица. Но при внесении в нее данных на разрешениях от 980рх и выше ТАБЛИЦА РАСТЯГИВАЕТ DIV, в котором находится ПО ГОРИЗОНТАЛИ, вместо того, чтобы самой "ужиматься" (см тут: https://jsfiddle.net/bL4u90x4/)
Внизу появляется полоса прокрутки.

Подскажите, как решить проблему. Очень желательно без javascript (я в этом языке ничего вообще не понимаю).

Спасибо
BA
Berik Asembaev
4 033
Error 404

We're truly sorry, but there is no such page.
Павел Шандыба
Павел Шандыба
20 058
Лучший ответ
Berik Asembaev скобка закрывающая попала в адрес :)
На некоторых разрешениях у td есть довольно толстые пэддинги, поэтому таблица при всём желании не может ужаться. Нужно добавлять ещё media-запросы и менять там padding и font-size
Наличие margin у td и th не очень понимаю. Он же не применится.

Мне кажется, что при таком количестве текста полоса прокрутки — лучший выход. Это гораздо лучше, чем текст, написанный по вертикали по одной букве на строке (как сейчас s кух, s общ) или мелкий текст, который всё равно придётся увеличивать и получать прокрутку.

Другой вариант — вывести только важную информацию в 2-3 столбца, а по нажатию на кнопку/строку показывать специальный блок с дополнительными данными в виде вертикальной таблицы. Блок можно сделать плавающим или закрепить где-то наверху/визу, но там его может быть и не видно.

Если цена в тысячах, то лучше отбивать разряды пробелами, так русскому человеку понятнее, чем точкой. А ещё лучше вынести в заголовок "Цена, тыс. руб" и писать просто "18". Если будут дробные цены, то писать дробью, всё равно их будет меньшинство. Таким образом столбцы немного сузятся и визуально разгрузятся. Срок, я смотрю, тоже в месяцах, тогда лучше вынести месяцы в заголовок и писать только число. Зачем повторять "мес" в каждой строке?
А ещё, если заголовок обозначен "с/у", то не нужно писать "разд с/у", достаточно писать "раздельный". Все сокращения лучше сопровождать title или вообще брать в тэг abbr, потому что не все люди понимают, что такое кирп/мон. Кирп — ещё ладно, а вот мон — никаких идей. Не все ж люди всю жизнь квартиры продают, кому-то это нужно раз в жизни, и такое обилие сокращений только запутывает.

"Кол-во комнат": "1к. кв." Создаётся впечатление, что вы количество комнат считаете в каких-то "к. кв." На самом деле количество — это просто число, не бойтесь его писать. Кому нужны эти повторяющиеся к. кв.? Даже если по-руски прочитать, то получается "Количество комнат в нашей квартире — двухкомнатная квартира"
Хол и Инт — это холодильник и интернет? Не каждый догадается. А вот на СтМ у меня нет вариантов. Тут тоже нужны всплывашки. Вроде, станция метро, но она же в третьем столбце. Ааа, стиралка это. Зашифруют же.
Геннадий Дегтемиров
Геннадий Дегтемиров
75 040
Berik Asembaev Вообще-то, все пэддинги и марджины обнулены на той странице, куда я это добро "запихиваю".

Но, в любом случае сейчас попробую на своем примере обнулить их для ясности.
Berik Asembaev * { margin : 0; padding : 0; } - добавление ничего не меняет.
Попробую менять шриффты и отступы.

Удивительно, что в предыдущих версиях html таблицы без проблем "вписывались" куда угодно, а сейчас такая сложность с этим появилась.
Berik Asembaev Информация приходит именно в таком виде. Редактировать каждый табличный файл глобально - слишком трудоемко. Люди, для которых эта информация предназначена, хорошо понимают, что и как сокращается + для тех, кому непривычен подобный формат представления информации, всегда публикуется расшифровка сокращений.
Кроме 1к. кв, 2к. кв и т. п есть еще и 1к (3ккв) - одна комната в трехкомнатной квартире :) и т. д. :)

Те, кто ищет жилье в аренду прекрасно понимают, о чем идет речь.
Вопрос такой, скажите пожалуйста это таблица для сайта риелторских услуг?
Вигантас Повилайтис
Вигантас Повилайтис
9 407
хе-хе) все таки заставил ее сжиматься:
https://jsfiddle.net/bL4u90x4/2/
АК
Александр Клёцкин
2 398
Berik Asembaev О! Сейчас в редактор скопирую, посмотрю :)

Не сжимается у меня :( Внизу та же самая полоса прокрутки :(
Berik Asembaev И в онлайн-редакторе, и в редакторе на пк ничего не поменялось. Все та же полоса прокрутки горизонтальная внизу. Мошут просто не все столбцы отобразиться прямо по границе одного из них. Я тоже не сразу заметила эту пакость.
Berik Asembaev Хотела написать: " Могут просто не все столбцы отобразиться, выпирание таблицы за пределы блока идет прямо по границе одного из столбцов. Поэтому "обрезанные" столбцы просто не видны"

Как-то так.

Похожие вопросы