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

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем bawan, 6 дек 2013.

  1. bawan

    bawan

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

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

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    560
    Можно попробовать сместить 2 столбца вниз.
     
  3. bawan

    bawan

    Регистрация:
    15 дек 2012
    Сообщения:
    102
    Симпатии:
    11
    Всё равно в 300 пикс. нечитабельно получается... можно конечно картинкой сделать раскрывающейся, но это совсем хреново - данные из таблицы тогда не будут индексироваться..
     
  4. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    560
    Хорошо, а если все 4 столбца сделать в 1 ?
     
  5. bawan

    bawan

    Регистрация:
    15 дек 2012
    Сообщения:
    102
    Симпатии:
    11
    не, так нельзя - 1-й столбец название, остальные это параметры...
     
  6. eric

    eric

    Регистрация:
    5 дек 2013
    Сообщения:
    59
    Симпатии:
    13
    Переписать таблицу резиновым блоками в li?
     
  7. bawan

    bawan

    Регистрация:
    15 дек 2012
    Сообщения:
    102
    Симпатии:
    11
    Не понял, это как? Разве так она не расползется? Или надо еще и шрифт уменьшать тогда...
    Пример что-ли приведи...
     
  8. alex_storm

    alex_storm дизайн, CSS Команда форума

    Регистрация:
    11 дек 2012
    Сообщения:
    1.120
    Симпатии:
    560
    Как я понял, человек предлагает структуру вот такую:
    Код:
    <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>
    По другому тут только блочную верстку делать и отходить от таблицы.