Создание респонсивных таблиц с помощью css
В этой заметке мы рассмотрим, как можно использовать таблицы в респонсивных шаблонах и как мы можем сделать удобным использование таблиц на мобильных устройствах.
При создании респонсивных таблиц вы столкнетесь с множеством проблем:
- Слишком много колонок
- Слова вылазят за границы ячеек
- Ширина колонки становится слишком малой
- Если у вас много строк, при скроле вы не сможете видеть заголовки колонок
В этой заметке, надеюсь, мы исправим все эти проблемы путем использования респонсивного css-решения.
Вмещение float-элементов
Недавно столкнулся с достаточно неприятной проблемой - при использовании свойств float в дочерних div’ах, они не растягивают по вертикали размер родительских элементов, и как бы "перекрывают" их. Оказывается, проблема достаточно тривиальная и возникла у меня только из-за отсутствия опыта верстальщика, вскоре я нашел решение в заметке, которую с удовольствием переведу на русский.
Растягивание блока на пустое пространство родительского элемента (div expand)
Сегодня столкнулся с неприятной проблемой - при блочной верстке понадобилось растянуть блок на пустое пространство родительского элемента по вертикали (div expand). Естественно, по горизонтали никакой трудности нету - просто задать отображение блочным (display: block) и будет счастье =).
Форма без таблиц
Сверстать форму с помощью таблиц может даже начинающий веб-мастер, а вот для верстки формы без таблиц, требуются уже некоторые навыки. Рассмотрим простенький пример, например, форму авторизации.