Как изменить css полосы прокрутки внутри таблицы

У меня есть горизонтальная полоса прокрутки внутри таблицы, обернутой внутри div с фиксированным левым столбцом, и я хочу изменить его css, чтобы он выглядел как тот, что был на изображении. попробовал несколько решений, но никто из них не работает. без использования полосы прокрутки браузеров. Syle.css:Как изменить css полосы прокрутки внутри таблицы

body { 
font:16px Calibri; 
} 

table { 
border-collapse:separate; 
border-top:1px solid grey; 
} 

td { 
border-top-width:0; 
white-space:nowrap; 
margin:0; 
} 

div { 
width:600px; 
overflow-x:scroll; 
margin-left:5em; 
overflow-y:visible; 
padding-bottom:1px; 
} 

.headcol { 
position:absolute; 
width:5em; 
left:0; 
top:auto; 
border-right:0 none #000; 
border-top-width:3px; 
margin-top:-3px; 
} 

.long { 
background:#FF0; 
}

index.html:

<html> 
    <head> 
     <link rel="stylesheet" href="style.css"/> 
    </head> 
    <body> 
     <div> 
     <table> 
      <tr> 
       <td class="headcol">2/2/2015</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
      </tr> 
      <tr> 
       <td class="headcol">2/2/2015</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
       <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td> 
      </tr> 
     </table> 
     </div> 
    </body> 
</html>

источник

2015-11-05 Faisal Naseer

Хммм. Я не совсем уверен, что вы спрашиваете. Итак, вы хотите, чтобы полосы прокрутки были зелеными? –

попытайтесь посмотреть на это [http://cssdeck.com/labs/css3-webkit-vertical-scrollbars/](http://cssdeck.com/labs/css3-webkit-vertical-scrollbars/) – uno

Спасибо всем вам я решил мою проблему.

div::-webkit-scrollbar 
{ 
height:7px; 

} 
div::-webkit-scrollbar-track 
{ 
    border-radius: 10px; 

    webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
} 
div::-webkit-scrollbar-thumb 
{ 
    background-color: a6c53b; 


    webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

источник

2015-11-05 05:33:31

Как изменить css полосы прокрутки внутри таблицы

ответ

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