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

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


    И так вот css:
    PHP код:
    .features-table
    {
      
    width: 100%;
      
    margin: 0 auto;
      
    border-collapse: separate;
      
    border-spacing: 0;
      
    border: 0;
      
    text-shadow: 0 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
    {
      
    height: 50px;
      
    padding: 0 20px;
      
    border-bottom: 1px solid #cdcdcd;
      
    box-shadow: 0 1px 0 white;
      -
    moz-box-shadow: 0 1px 0 white;
      -
    webkit-box-shadow: 0 1px 0 white;
      
    text-align: center;
      
    vertical-align: middle;
      
    display: table-cell;
    }
     
    .
    features-table tbody td
    {
      
    text-align: center;
      
    width: 150px;
    }
     
     
    .
    features-table td.grey
    {
      
    background: #efefef;
      
    background: rgba(144,144,144,0.15);
      
    border-right: 1px solid white;
    }
     
    .
    features-table td.green
    {
      
    background: #e7f3d4;
      
    background: rgba(184,243,85,0.3);
    }
     
    .
    features-table td:nowrap
    {
      
    white-space: nowrap;
    }
     
    .
    features-table thead td
    {
      
    font-size: 120%; 
      
    font-weight: bold;
      -
    moz-border-radius-topright: 10px;
      -
    moz-border-radius-topleft: 10px;
      
    border-top-right-radius: 10px;
      
    border-top-left-radius: 10px;
      
    border-top: 1px solid #eaeaea;
    }
     
    .
    features-table tfoot td
    {
      
    font-size: 120%; 
      
    font-weight: bold;
      -
    moz-border-radius-bottomright: 10px;
      -
    moz-border-radius-bottomleft: 10px;
      
    border-bottom-right-radius: 10px;
      
    border-bottom-left-radius: 10px;
      
    border-bottom: 1px solid #dadada;
    } 
    • 0
  2. Гуру Аватар для Ems
    • Регистрация: 24.05.2011
    • Сообщений: 2,028
    • Репутация: 663
    Вторая таблица не имеет горизонтальной прокрутки, может имелась ввиду первая?
    Может стоит присмотреться к 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

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

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

Информеры