在长滚动表上更改水平设计

Question

我有一个很长的桌子可以在我的博客上展示，如果我尝试将它放在一个单独的空间中看起来很笨重，所以我写了一个小的CSS来使表格可以水平滚动，如下所示：

.table-scroll {
    margin-bottom: 0;
    overflow: hidden; 
    overflow-x: scroll;
    display: block;
    white-space: nowrap;
}

现在问题是PC上的水平滚动看起来非常糟糕，如下所示：

但我希望它看起来像这样：

通常是大多数滚动条在移动设备上显示的方式。任何人都可以帮助我解决我怎么能实现它？

Answer 1

您可以使用angular.module('confusionApp') .constant("baseURL", "http://localhost:3000/") 和-webkit-scrollbar实现此目的（适用于Chrome和Safari）：

-webkit-scrollbar-thumb

小提琴：https://jsfiddle.net/ng3fb0gh/1/

Answer 2

您可以尝试这样的事情

<style type="text/css">
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #e1e1e1;
  border: 0px none #ffffff;
  border-radius: 1px;
}
::-webkit-scrollbar-thumb:hover {
  background: #ffffff;
}
::-webkit-scrollbar-thumb:active {
  background: #000000;
}
::-webkit-scrollbar-track {
  background: #666666;
  border: 0px none #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
  background: #666666;
}
::-webkit-scrollbar-track:active {
  background: #333333;
}
::-webkit-scrollbar-corner {
  background: transparent;
}
</style>

这将更改每个滚动条，如果您只想修改表格中的滚动条，则只需将css应用于yoir .table-scroll class。