Создание ячеек таблицы как блочного элемента

Question

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

Мое основное ограничение заключается в том, что я не могу редактировать исходный HTML и должен работать с предоставленным исходным кодом.

Я хочу, чтобы таблица, содержащая кнопки, реагировала, когда она достигает 450 пикселей в ширину, опуская кнопки (ячейки таблицы) в свою собственную строку. Я могу сделать это просто через divs но нет tables, Я создал простой пример того, что я хочу сделать, http://test.aboutcher.co.uk/so/tables.html но я не знаю, как этого эффекта можно достичь в таблице.

Я знаю, что таблицы являются плохой идеей для макетов, но я не могу изменить это в исходном коде, поэтому приходится бороться с этим.

редактировать
Я нашел свою проблему, есть не ячейка, которая не получает display:block стиль, примененный в источнике, заставляющий два других, которые получают стиль, игнорировать display:block.

Answer 1

Хотя это не идеальный способ. но, как я вижу, я думаю, что вы можете создать еще одну строку таблицы и скрыть ее изначально, не отображая ничего; а затем использовать CSS медиа-запрос, где вы задаете указать ширину: XXpx; и установите верхний 2-й столбец в display: none; и нижний стол колонн до display : block;

Надеюсь, что это имеет смысл

@media (max-device-width = 400px) {
  .second-column{display:block;}
.first-column{display:none;}
}

Answer 2

Вам просто нужно определить, что ваш td является display:block и манипулировать ими как вашими div, Посмотрите на эту демонстрацию: http://jsfiddle.net/68EQK/