Резиновая таблица CSS

(Ответов: 2, Просмотров: 2913)
  1. Студент
    • Регистрация: 09.12.2014
    • Сообщений: 77
    • Репутация: 4
    • Webmoney BL: ?
    Всех с новым годом форумчане!
    прошу помочь, столкнулся с такой проблемой, что таблица html + css не резиновая и не могу ничего придумать, так как не мастер в этом. проблема, что не помещается таблица в экран при просмотре с мобильного устройства.
    Помогите добавить прокрутку по горизонтали на подобии 2й таблицы как на сайте


    И так вот css:
    PHP код:
    .features-table
    {
      
    width100%;
      
    margin0 auto;
      
    border-collapseseparate;
      
    border-spacing0;
      
    border0;
      
    text-shadow0 1px 0 #fff;
      
    color#2a2a2a;
      
    background#fafafa;
      
    background-image: -moz-linear-gradient(top#fff, #eaeaea, #fff); /* Firefox 3.6 */
      
    background-image: -webkit-gradient(linear,center bottom,center top,from(#fff),color-stop(0.5, #eaeaea),to(#fff));
      
    margin-top:20px;
      
    margin-bottom:20px;
    }
     
    .
    features-table td
    {
      
    height50px;
      
    padding0 20px;
      
    border-bottom1px solid #cdcdcd;
      
    box-shadow0 1px 0 white;
      -
    moz-box-shadow0 1px 0 white;
      -
    webkit-box-shadow0 1px 0 white;
      
    text-aligncenter;
      
    vertical-alignmiddle;
      
    displaytable-cell;
    }
     
    .
    features-table tbody td
    {
      
    text-aligncenter;
      
    width150px;
    }
     
     
    .
    features-table td.grey
    {
      
    background#efefef;
      
    backgroundrgba(144,144,144,0.15);
      
    border-right1px solid white;
    }
     
    .
    features-table td.green
    {
      
    background#e7f3d4;
      
    backgroundrgba(184,243,85,0.3);
    }
     
    .
    features-table td:nowrap
    {
      
    white-spacenowrap;
    }
     
    .
    features-table thead td
    {
      
    font-size120%; 
      
    font-weightbold;
      -
    moz-border-radius-topright10px;
      -
    moz-border-radius-topleft10px;
      
    border-top-right-radius10px;
      
    border-top-left-radius10px;
      
    border-top1px solid #eaeaea;
    }
     
    .
    features-table tfoot td
    {
      
    font-size120%; 
      
    font-weightbold;
      -
    moz-border-radius-bottomright10px;
      -
    moz-border-radius-bottomleft10px;
      
    border-bottom-right-radius10px;
      
    border-bottom-left-radius10px;
      
    border-bottom1px solid #dadada;

    • 0
  2. Гуру Аватар для Ems
    • Регистрация: 24.05.2011
    • Сообщений: 2,030
    • Репутация: 661
    Вторая таблица не имеет горизонтальной прокрутки, может имелась ввиду первая?
    Может стоит присмотреться к Flexbox?
    Облачный хостинг из TOP-3 - от 1 Gb ОЗУ, от 25 GB SSD.
    • 0
  3. Опытный Аватар для Vlad03
    • Регистрация: 21.05.2014
    • Сообщений: 404
    • Репутация: 33
    • Webmoney BL: ?
    autorenta,Показали бы саму верстку, в вашем примере, у первой таблицы, есть элемент tbody, вот у него есть css
    Код:
        display: block;
        overflow-x: auto;
        position: relative;
        white-space: nowrap;
        width: auto;
    Вот white-space и overflow-x используйте у себя.
    • 0

Похожие темы

Темы Раздел Ответов Последний пост
Резиновая верстка
WordPress 6 09.08.2014 14:59
Резиновая верстка
Web программирование 14 06.08.2013 19:58
Мобильная версия сайта, адаптивный дизайн или резиновая вёрстка? Расставляем точки над i
Дайджест блогосферы 1 04.06.2013 01:25
Резиновая верстка на WP
Другая работа 0 15.04.2013 18:28
Резиновая блочная верстка с фиксированными колонками по бокам
Web программирование 10 11.10.2011 10:21

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры