Создание респонсивных таблиц с помощью css

В этой заметке мы рассмотрим, как можно использовать таблицы в респонсивных шаблонах и как мы можем сделать удобным использование таблиц на мобильных устройствах.

При создании респонсивных таблиц вы столкнетесь с множеством проблем:

  • Слишком много колонок
  • Слова вылазят за границы ячеек
  • Ширина колонки становится слишком малой
  • Если у вас много строк, при скроле вы не сможете видеть заголовки колонок

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

Вмещение float-элементов

Недавно столкнулся с достаточно неприятной проблемой - при использовании свойств float в дочерних div’ах, они не растягивают по вертикали размер родительских элементов, и как бы "перекрывают" их. Оказывается, проблема достаточно тривиальная и возникла у меня только из-за отсутствия опыта верстальщика, вскоре я нашел решение в заметке, которую с удовольствием переведу на русский.

Растягивание блока на пустое пространство родительского элемента (div expand)

Сегодня столкнулся с неприятной проблемой - при блочной верстке понадобилось растянуть блок на пустое пространство родительского элемента по вертикали (div expand). Естественно, по горизонтали никакой трудности нету - просто задать отображение блочным (display: block) и будет счастье =).

Форма без таблиц

Сверстать форму с помощью таблиц может даже начинающий веб-мастер, а вот для верстки формы без таблиц, требуются уже некоторые навыки. Рассмотрим простенький пример, например, форму авторизации.