更改长滚动条的水平设计 table

Question

我有一个很长的 table 可以在我的博客上展示，如果我尝试将它们放在一起看起来真的很笨重 space 所以我写了一个小的 CSS 来制作table 可水平滚动，像这样：

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

现在的问题是水平滚动在PC上看起来很糟糕，像这样：

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

大多数滚动条在移动设备上的正常显示方式。任何人都可以帮助我实现它吗？

Answer 1

您可以使用 -webkit-scrollbar 和 -webkit-scrollbar-thumb 实现此目的（对于 Chrome 和 Safari）：

.table-scroll::-webkit-scrollbar {
  height: 8px;
}
.table-scroll::-webkit-scrollbar-thumb {
  background: rgba(180, 180, 180, 0.7);
}

Fiddle: 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>

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

更改长滚动条的水平设计 table

Changing horizontal design on a long scrollable table

html

css

scrollbar

css-tables