Как сделать адаптивную таблицу?

[nikki4]

Делаю адаптивный дизайн. Запутался, что с таблицами делать.

Вот например дано:

<style type="text/css">.tg td{border-style:solid;}.tg th{border-style:solid;}</style><table class="tg"><tr>	<td rowspan="2" >Ячейка 1</td>	<td nowrap >Ячейка 2</td>	<td>Ячейка 3</td>	<td rowspan="2">Ячейка 4</td></tr> <tr>	 <td colspan="2">Ячейка 5</td> </tr> </table> 

Погуглил, предлагают делать на основе дивов. заменил на дивы

<style type="text/css">.mytable  {width:500px; border:1px solid black;}.mytable td{border:1px solid black;}.tr {border:1px solid black; }.td {border:1px solid black;}.tdrs {border:1px solid black;}.tdcs {border:1px solid black;}</style><div class="mytable"> <div class="tr">    <div class="tdrs">Ячейка 1</div>    <div class="td">Ячейка 2</div>    <div class="td">Ячейка 3</div>    <div class="tdrs">Ячейка 4</div></div><div class="tr">    <div class="tdcs">Ячейка 5</div></div> </div>

Вопрос - как теперь сделать таблицу в которых ячейки имеют соответсвующий colspan и rowspan.

ps: таблица состоит из нескольких таких блоков указанных выше.

Edited April 16, 2015 by nikki4

[nikki4]

Нашел способ решения. Надо сузить заголовки th, а именно последний.

word-break: break-all;

+ там была картинка, там просто отстцпы надо было убрать + подумал и можно переименовать было некоторые заголовки, а то и вообще удалить последний столбец

Edited April 16, 2015 by nikki4

[Great Rash]

А что надо сделать? Картинка есть?

[SelenIT]

предлагают делать на основе дивов

Не слушайте их. Ячейкам тоже всегда можно сменить display на block при надобности.

[nikki4]

А что надо сделать? Картинка есть?

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

 

А вообще в итоге надо вот такое:

[Great Rash]

А вообще в итоге надо вот такое

А адаптивность в чём проявляться должна? 

[SelenIT]

заготовку на дивах, в котором надо поправить стили

colspan и rowspan на дивах, к сожалению, не делаются.

 

Делать таблицы на дивах несемантично