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

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

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

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

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

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