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

Question

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

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

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

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

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

Answer 1

Хотя это не идеальный способ. но, как я вижу, я думаю, что вы можете создать еще одну строку таблицы и сначала скрыть ее, указав на дисплей нет; а затем использовать CSS-медиа-запрос, где вы задаете ширину: XXpx; и установить верхний 2-й coloumn к 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/