CODEWITHSUNDEEP
css
Kimomaru
Kimomaru

Reputation: 1023

Scroll bars and different browsers

In IE, my web page's vertical scroll bar appears inside the table that is being scrolled (which is what I want). In Chrome and Firefox, it appears on the outside. It's quite vexing. Does anyone know what I can do so that the scroll bar can appear on the inside for all three browsers? This is my CSS;

body
{
background-color:#d0e4fe;
font-family:"Arial";
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Tahoma";
font-size:20px;
}
table.header
{
table-align:left;
border-collapse:collapse;
width:auto;
font-size:3em;
font-weight:bold;
border:1px solid grey;
table-layout: fixed;
}
table.top
{
table-align:left;
border-collapse:collapse;
width:99.2%;
//width:1800px;
//width: 1330px;
//width:auto;
table-layout: fixed;
border:1px solid grey;
}
table.body
{
border-collapse:collapse;
width:100%;
border:1px solid grey;
table-layout: fixed;
table-align:left;
}
table.footer
{
table-align:center;
border-collapse:collapse;
width:auto;
table-layout: fixed;
}
td.header
{
//border:1px solid grey;
//word-wrap: break-word;
padding:10px;
}
.scroll 
{
max-height: 425px;
//overflow: auto;
//overflow: scroll;
overflow-y: auto;
overflow-x: hidden;
}
td.body
{
border:0px solid grey;
padding:10px;
text-align:left;
border:1px solid grey;
width:8.5%;
font-size:15px;
word-wrap: break-word;
}
td.footer
{
text-align:center;
padding:10px;
word-wrap: break-word;
}
th.body
{
text-align:left;
padding:10px;
border:1px solid grey;
//width:8.4%;
font-size:15px;
word-wrap: break-word;
}

Upvotes: 0

Views: 148

Answers (1)

alessandrio
alessandrio

Reputation: 4370

see here documentation or see here

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


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


.scroll::-webkit-scrollbar-thumb{ 
      border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); }

Upvotes: 1

Related Questions