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

Тема в разделе "Верстка", создана пользователем maxim nestoff, 26 июн 2013.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. maxim nestoff

    maxim nestoff Создатель

    Регистр.:
    23 апр 2009
    Сообщения:
    182
    Симпатии:
    13
    Ребят, возможно очень тупой вопрос, но как такую таблицу переделать чтоб в случае адаптивного дизайна был перенос таблиц? Сейчас на айпаде такая таблица вылазит за рамки поля
    HTML:
    <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>
     
  2. Compressor

    Compressor

    Регистр.:
    31 янв 2009
    Сообщения:
    314
    Симпатии:
    200
    Вроде как с таблицей такого не сделать. Переверстай дивами с float: left. При недостатке места по горизонтали они будут съезжать вниз.


    HTML:
    <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>
     
  3. NiceBro

    NiceBro Создатель

    Регистр.:
    2 ноя 2012
    Сообщения:
    44
    Симпатии:
    25
  4. mitka_san

    mitka_san Писатель

    Регистр.:
    14 апр 2013
    Сообщения:
    2
    Симпатии:
    0
    в данном конкретном случае, начать с того чтобы заменить абсолютные значения ширины на относительные.

    очень интересное решение для таблиц в адаптивном дизайне представлено здесь:
    http://koulikov.com/2012/08/responsive-data-tables/

    еще хороший фреймворк для адаптивной верстки:
    http://habrahabr.ru/post/144291/

    незнаю на сколько подойдет в решении вашей задачи но интересный плагин для таблиц:
    http://xozblog.ru/2012/12/responsive-table/
     
  5. Uniorsis

    Uniorsis Постоялец

    Регистр.:
    20 июл 2011
    Сообщения:
    81
    Симпатии:
    15
    Попробуй сделать таблицу без <td>, а на дивах - http://xhtml.ru/2006/04/05/divtable/ .Они лучше адаптируются и вообще гибче.
     
  6. redp

    redp Писатель

    Заблокирован
    Регистр.:
    19 фев 2012
    Сообщения:
    7
    Симпатии:
    0
    Вообще про адаптивную верстку хорошо писали на хабре, вот например http://habrahabr.ru/post/149742/
     
  7. Aftal1ck

    Aftal1ck Создатель

    Регистр.:
    22 дек 2007
    Сообщения:
    44
    Симпатии:
    9
    Материалы которые помогут с адаптивной версткой раз, два.
    В два хорошая подборка литературы по дизайну и верстке в целом, хорошее чтиво.
     
    zerofirefox нравится это.