Адаптивная таблица

[maxim nestoff]

Ребят, возможно очень тупой вопрос, но как такую таблицу переделать чтоб в случае адаптивного дизайна был перенос таблиц? Сейчас на айпаде такая таблица вылазит за рамки поля

<table border="0" width="900">
    <tbody>
        <tr>
            <th align="left" width="28">&nbsp;</th>
            <th align="left" height="43" width="47"><strong><img height="39" longdesc="dollar_currency_sign.png" src="dollar_currency_sign.png" width="46" /></strong></th>
            <th align="center" width="43"><strong style="font-size: 14px">Раз</strong></th>
            <th align="left" width="56">&nbsp;</th>
            <td align="center" width="30">&nbsp;</td>
            <td align="center" width="47"><strong style="font-size: 14px"><img height="39" longdesc="shopping_cart.png" src="shopping_cart.png" width="46" /></strong></td>
            <td align="center" width="71"><strong style="font-size: 14px">Два</strong></td>
            <td align="center" width="37">&nbsp;</td>
            <td align="center" width="40">&nbsp;</td>
            <td align="center" width="47"><strong style="font-size: 14px"><img height="39" longdesc="users.png" src="users.png" width="46" /></strong></td>
            <td align="center" width="79"><strong style="font-size: 14px">Три</strong></td>
            <td align="justify" width="31">&nbsp;</td>
            <td align="center" width="49">&nbsp;</td>
            <td align="left" width="47"><strong style="font-size: 14px"><img height="39" longdesc="chart.png" src="chart.png" width="46" /></strong></td>
            <td align="center" width="141"><strong style="font-size: 14px">Четыре</strong></td>
            <td align="left" width="41">&nbsp;</td>
        </tr>
        <tr>
            <td align="center" colspan="4" height="92" style="font-size: 12px" valign="top"><p>Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст </p></td>
            <td align="center" colspan="4" style="font-size: 12px" valign="top">Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</td>
            <td align="center" colspan="4" style="font-size: 12px" valign="top">Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</td>
            <td align="center" colspan="4" style="font-size: 12px" valign="top">Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст</td>
        </tr>
    </tbody>
</table>

 

[Compressor]

Вроде как с таблицей такого не сделать. Переверстай дивами с float: left. При недостатке места по горизонтали они будут съезжать вниз.

<style>
    .text {
        width: 200px;
        float: left;
        text-align: center;
        margin-right: 25px;
    }
 
    .text img {
        width: 39px;
        height: 46px;
        vertical-align:middle;
    }
 
    .text span {
        height: 46px;
        margin-left: 20px;
        font-weight: bold;
    }
 
    .text p {
        font-size: 12px
    }
</style>
 
<div class="text">
    <img src="dollar_currency_sign.png" alt="dollar_currency_sign.png">
    <span>Lorem ipsum</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, ratione, cumque molestiae minus blanditiis quas.</p>
</div>
 
<div class="text">
    <img src="shopping_cart.png" alt="shopping_cart.png">
    <span>Lorem ipsum</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, ratione, cumque molestiae minus blanditiis quas.</p>
</div>
 
<div class="text">
    <img src="users.png" alt="users.png">
    <span>Lorem ipsum</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, ratione, cumque molestiae minus blanditiis quas.</p>
</div>
 
<div class="text">
    <img src="chart.png" alt="chart.png">
    <span>Lorem ipsum</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, ratione, cumque molestiae minus blanditiis quas.</p>
</div>

 

[NiceBro]

Посмотри тут неплохое решение Для просмотра ссылки Войди или Зарегистрируйся

 

[mitka_san]

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

очень интересное решение для таблиц в адаптивном дизайне представлено здесь:
Для просмотра ссылки Войди или Зарегистрируйся

еще хороший фреймворк для адаптивной верстки:
Для просмотра ссылки Войди или Зарегистрируйся

незнаю на сколько подойдет в решении вашей задачи но интересный плагин для таблиц:
Для просмотра ссылки Войди или Зарегистрируйся

 

[Uniorsis]

Попробуй сделать таблицу без <td>, а на дивах - Для просмотра ссылки Войди или Зарегистрируйся .Они лучше адаптируются и вообще гибче.

 

[redp]

Вообще про адаптивную верстку хорошо писали на хабре, вот например Для просмотра ссылки Войди или Зарегистрируйся

 

[Aftal1ck]

Материалы которые помогут с адаптивной версткой Для просмотра ссылки Войди или Зарегистрируйся, Для просмотра ссылки Войди или Зарегистрируйся.
В два хорошая подборка литературы по дизайну и верстке в целом, хорошее чтиво.