Полоса прокрутки CSS только для таблицы

Я создал отзывчивую таблицу CSS, и я хочу, чтобы определенный CSS на полосе прокрутки таблицы.Полоса прокрутки CSS только для таблицы

Но при вставке этого кода также изменяется полоса прокрутки браузера.

Как конкретно использовать этот дизайн для моего стола?

body { 
    padding:1.5em; 
    background: #f5f5f5 
} 

table { 
    border: 1px #a39485 solid; 
    font-size: .9em; 
    text-align: center; 
    box-shadow: 0 2px 5px rgba(0,0,0,.25); 
    width: 100%; 
    table-layout: fixed; 
    border-collapse: collapse; 
    border-radius: 5px; 
    overflow: hidden; 
} 

th { 
    text-align: center; 
} 

thead { 
    font-weight: bold; 
    color: #fff; 
    background: #0088CC; 
} 

td, th { 
    padding: 1em .5em; 
    vertical-align: middle; 
} 

td { 
    border-bottom: 1px solid rgba(0,0,0,.1); 
    background: #fff; 
} 

a { 
    color: #73685d; 
} 

@media all and (max-width: 768px) { 

    table, thead, tbody, th, td, tr { 
    display: block; 
    } 

    th { 
    text-align: right; 
    } 

    table { 
    position: relative; 
    padding-bottom: 0; 
    border: none; 
    box-shadow: 0 0 10px rgba(0,0,0,.2); 
    } 

    thead { 
    float: left; 
    white-space: nowrap; 
    } 

    tbody { 
    overflow-x: auto; 
    overflow-y: hidden; 
    position: relative; 
    white-space: nowrap; 
    } 

    tr { 
    display: inline-block; 
    vertical-align: top; 
    } 

    th { 
    border-bottom: 1px solid #a39485; 
    } 

    td { 
    border-bottom: 1px solid #e5e5e5; 
    } 


    } 

::-webkit-scrollbar { 
    width: 12px; 
} 

/* Track */ 
::-webkit-scrollbar-track { 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 

/* Handle */ 
::-webkit-scrollbar-thumb { 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    background: rgba(255,0,0,0.8); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
} 
::-webkit-scrollbar-thumb:window-inactive { 
    background: rgba(255,0,0,0.4); 
}

Просьба помочь.

источник

2014-11-19 Ali Akram

было бы легче ответить, если бы вы могли сделать пример jsfiddle :) – A1exandr

@ A1exandr - на самом деле таблица является php-скриптом. –

может просто использовать селектор, чтобы выбрать правильную полосу прокрутки. Можете ли вы указать прокрутку? Было бы полезно использовать jsfiddle. Или, по крайней мере, html. –

Вы должны иметь возможность таргетинга на полосу прокрутки таблицы точно так же, как и любой другой элемент css, помещая таблицу перед селектором scorll bar. Таким образом, вы можете сделать:

table::-webkit-scrollbar{ 
    /*Your styles here*/ 
} 
table::-webkit-scrollbar-thumb{ 
    /*Your styles here*/ 
} 
table::-webkit-scrollbar-thumb:window-inactive{ 
    /*Your styles here*/ 
}

Доказательство концепции здесь: http://codepen.io/supah_frank/pen/JooNKx

EDIT: Кроме того, я заметил несколько странных причуд, играя вокруг с этим в хроме (Не знаю, если это влияет на другие браузеры).

Во-первых, css для полос прокрутки, кажется, кэшируется, поэтому после изменения css обязательно сделайте резкое обновление (ctrl + F5).

Во-вторых, даже если вы не разрабатываете его, вам нужно настроить таргетинг и применить некоторый стиль до {your element}::-webkit-scrollbar, прежде чем вносить какие-либо изменения в полосу прокрутки для элемента (я обнаружил, что display: block работает, если вы не хотите действительно делать любые изменения). Если вы не настроите таргетинг на него, ни один из других css на полосе прокрутки не будет работать по какой-то нечетной причине.

источник

2014-11-19 18:57:12 AndrewTet

Спасибо. У меня возникла проблема корректного ввода кода перед «:: - webkit-scrollbar». Это сработало. Благодарю. –

Полоса прокрутки CSS только для таблицы

ответ

Смежные вопросы