admin管理员组文章数量:1418020
I am having a horizontal scroll-bar inside a table wrapped inside a div with left column fixed and I want to change its css so that it look like the one in the image.I have tried a few solutions but none of them are working. without effecting the browsers scroll bar. Syle.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>
I am having a horizontal scroll-bar inside a table wrapped inside a div with left column fixed and I want to change its css so that it look like the one in the image.I have tried a few solutions but none of them are working. without effecting the browsers scroll bar. Syle.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>
- Hmmm. I'm not quite sure what you are asking. So you want the scrollbars to be styled green??? – Daniel Murphy Commented Nov 5, 2015 at 4:58
- try to look at this http://cssdeck./labs/css3-webkit-vertical-scrollbars/ – uno Commented Nov 5, 2015 at 5:02
2 Answers
Reset to default 2Thanks all of you I have solved my problem.
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);
}
div::-webkit-scrollbar {
width: 1em;
height:10px;
}
div::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
}
div::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}本文标签： javascripthow to change css of scrollbar inside tableStack Overflow
版权声明：本文标题：javascript - how to change css of scrollbar inside table - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745282618a2651511.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论