Как отформатировать таблицу для чего-нибудь удобного для мобильных устройств?

Question

Я работаю над своей первой мобильной версией веб-сайта. У меня есть тысячи статей, которые содержат таблицы HTML. К сожалению, они имеют фиксированную ширину и в некоторых случаях используются для размещения контента (в основном, фотогалереи).

Мне было интересно, есть ли у кого-нибудь какие-либо предложения о способах просмотра и форматирования этих таблиц, чтобы они хорошо отображались на экране мобильного устройства без использования полос прокрутки? Как согласие на список или серию дивов. Есть идеи?

Я использую jQuery mobile в качестве фреймворка и кода на PHP.

Текущее единственное исправление, которое я могу придумать, - это обертывание таблиц в <div> с width:100% и overflow-x:auto.

Answer 1

По сути, вы разбили бы таблицу с помощью css, но вы можете попробовать что-то вроде этого:

table{
  width: 100%;
}
tr{
  display: block;
}
td{
  float: left;
  width: 24%
}

Это заставит вещи действовать как куча элементов div, а не строк и ячеек таблицы. Для фактических табличных данных я действительно не рекомендую это. Но с галереями и макетами у вас должно быть все в порядке.