我使用::-webkit-scrollbar
CSS选择器来减小水平滚动条的宽度,如下所示;
::-webkit-scrollbar
{
width: 2px;
height: 2px;
}
::-webkit-scrollbar-thumb
{
background-color:black;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Responsive Table</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<table class="table table-responsive" style="font-size:45px">
<caption>This is a table</caption>
<tr>
<th>Subject</th>
<th>GPA</th>
<th>Subject</th>
<th>GPA</th>
<th>Subject</th>
<th>GPA</th>
<th>Subject</th>
<th>GPA</th>
<th>Subject</th>
<th>GPA</th>
<th>Subject</th>
<th>GPA</th>
</tr>
</table>
</body>
</html>
它的工作正常与铬,但它不适用于IE浏览器。我尝试使用ms
和webkit
,但仍然没有改善!
IE / Edge中有no support。
不幸的是,没有本机支持,但你可以尝试自定义的js或jquery插件?以下是一些:jQuery Scrollbar,perfect-scrollbar,slimScroll或NiceScroll。