Jump to content
  • 0

Верстка таблиц


Delat
 Share

Question

6 answers to this question

Recommended Posts

  • 0

эм... никогда ничего нет общепринятого.

Наберите в поисковик responsive table и выбирайте тот вариант, который подойдёт под вашу задачу.

Наиболее простой, это делать "прокрутку" таблицы.

Более сложный, через атрибуты построчно выводить таблицу. Не знаю, как более правильно описать)

Link to comment
Share on other sites

  • 0

По-моему вы ещё сами не разобрались, что хотите сделать. 
Зачем вообще float? 

Зачем вам вообще таблица? Вы её вдоль и поперёк раскурочили. 

Для tr поставьте inline-block вместо float: left;

https://jsfiddle.net/npofopr/4b5wfk6z/2/

  • Like 1
Link to comment
Share on other sites

  • 0
14 минуты назад, npofopr сказал:

По-моему вы ещё сами не разобрались, что хотите сделать. 
Зачем вообще float? 

Зачем вам вообще таблица? Вы её вдоль и поперёк раскурочили. 

Для tr поставьте inline-block вместо float: left;

https://jsfiddle.net/npofopr/4b5wfk6z/2/

Я сделал сначала таблицу для больших размеров экранов https://jsfiddle.net/Delat/c7nv7c1s/

потом возник вопрос как сделать для мобильных и планшетов. Собственно уперся в полосу прокрутки - она не срабатывала. Решил задать вопрос здесь, Вы помогли, спасибо! Как-то так

Link to comment
Share on other sites

  • 0

Появились сложности ))

Подскажите, как исправить блок thead, он съезжает вниз при уменьшении экрана http://www.awesomescreenshot.com/image/2049476/53ea8a5f704048663ed7868a9389ee14

https://jsfiddle.net/Delat/qe3dp1c2/

Edited by Delat
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Evsey
      Доброго дня всем матерым верстальщикам.
      Есть задача сделать табличку графика на сайт. Технологии - понятно, что html и css. Табличка не большая, но с особенностями.
      А именно, в табличке есть группы объединенных ячеек, при чем не только внутри строк, но и между строками (объединяется несколько строк). Табличку прикрепил.
      Каркас table tr td без объединения ячеек могу сделать, но нужно объединить.
      Как правильнее всего сделать такое объединение? Было бы классно, чтобы ответ был сразу с примерами.

    • By Yarolina
      Здравствуйте, создаю таблицу в HTML, не получается в конце таблицы равномерно распределить столбцы и ячейки. Подскажите пожалуйста в чем ошибка:
       
      Пример нужной таблицы во вложениях
       
      Ссылка на код: https://pastebin.com/ZL8GRHU5
       
      Если не отображается ссылка текстовый документ кода во вложениях.
       
      Спасибо за помощь.

      Код.txt
    • By yaparoff
      Есть таблица. Колонки у нее выравниваются влево, а оставшаяся часть остается пустой
      http://skrinshoter.ru/s/100818/0jkG6HkA
      Пробовал решить это с помощью align=left и задать ширину колонкам, но это не сработало
      Что можно сделать?
      https://codepen.io/anon/pen/VBqBmw
    • By marischka
      Добрый день! Прошу помощи у специалистов. В мобильной версии сайта, таблица с ценами http://salon-fkt.ru/kosmetologiya съезжает и отображается некорректно. Сайт на Джумла, шаблон.

    • By Coder-vasya
      Добрые люди , помогите написать новичку таблицу. Мне дали задание, но я не могу разобраться, учусь на курсах , было всего 2 урока. Таблица на фото. В моем представлении сначала пишется таблица из 11 строк и 8 столбцов. Далее нужно объединить ячейки, затем убрать линии у закрашенных ячеек. Я не знаю как убрать линии у закрашенных ячеек. Далее я не знаю как выставить отступ от границы экрана в процентах , а также не знаю как выставить расстояние внизу между ячейками, как показано на рисунке. В идеале был бы очень признателен за полный код этой таблицы. Для меня проще 1 раз увидеть. Понимаю что для профессионала это 5ти минутное дело. Заранее благодарен откликнувшимся. Верхнюю строку я сделал 5% , чтобы в дальнейшем убрать границы ячеек и тем самым получить отступ от верхней границы экрана. Общая ширина таблицы 80% , далее расположив ее по центру получу по 10 % слева и справа. При удалении лишних ячеек , таблица не корректно отображается.  В общем любыми способами должна получиться таблица как на фото.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy