[Помогите] Таблицы и адаптивный дизайн

Проблемка возникла - есть сайт, имеющий вариант для смартфонов (ширина 300 пикс).
Там статья, в ней таблица в 4 столбца и 6 строк, так вот в десктопном виде, она отображается норм, а в мобильном жопа - не пойму как сделать - либо она разлезается шире сайта, либо шрифт совсем мелкий нечитабельный получается.
Может у кого какие идеи будут, как большую таблицу в маленький экран влепить?

Пока есть идея, сделать её разворачивающейся по клику, но пока не понял как это реализовать...

 

Можно попробовать сместить 2 столбца вниз.

 

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

 

Хорошо, а если все 4 столбца сделать в 1 ?

 

не, так нельзя - 1-й столбец название, остальные это параметры...

 

Переписать таблицу резиновым блоками в li?

 

Не понял, это как? Разве так она не расползется? Или надо еще и шрифт уменьшать тогда...
Пример что-ли приведи...

 

Как я понял, человек предлагает структуру вот такую:

Код:

<div class="table">
<ul class="first">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="second">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="third">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="foth">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

По другому тут только блочную верстку делать и отходить от таблицы.