如何隐藏滚动条但保留溢出 table 的功能？

Question

我创建了一个 table，其中包含一个具有特定最大高度的容器。我想为溢出 table 保留滚动功能，但隐藏滚动条本身。

我尝试了互联网上的一些解决方案，但无法实现。

HTML:

<div id="container">
<table id="codexpl">
    <tr>
        <th>#</th>
        <th>Columna</th>
        <th>Relative</th>
        <th>Isso</th>
    </tr>
    <tr>
        <td>1</td>
        <td>This</td>
        <td>Column</td>
        <td>Is</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Coloumn</td>
        <td>two</td>
        <td>this</td>
    </tr>
    <tr>
        <td>3</td>
        <td>is</td>
        <td>not equals</td>
        <td>a</td>
    </tr>
    <tr>
        <td>4</td>
        <td>the</td>
        <td>Column</td>
        <td>real</td>
    </tr>
    <tr>
        <td>5</td>
        <td>first</td>
        <td>One</td>
        <td>Coloumn</td>
    </tr>
</table>
</div>

CSS:

#codexpl th, #codexpl td{
    padding:0.8em;
    border: 1px solid;
}
#codexpl th{
    background-color:#6699FF;
    font-weight:bold;
}

#container {
  max-height:200px;
  overflow:auto;
}

这是我创建的 jsfiddle：

http://jsfiddle.net/k6rp1vsh/

编辑：网站需要运行的浏览器是不支持最新功能的Opera version 11！

提前致谢！

Answer 1

试试这个

::-webkit-scrollbar ::-webkit-scrollbar-track ::-webkit-scrollbar-thumb {
    display: none;
}

Answer 2

查看代码段。如果您有任何疑问，请告诉我。

#codexpl th, #codexpl td{
    padding:0.8em;
    border: 1px solid;
}
#codexpl th{
    background-color:#6699FF;
    font-weight:bold;
}

#container {
  width: 100%;
    overflow: hidden;
    max-height: unset;
}

table#codexpl {
    display: block;
    width: 105%;
    max-height: 200px;
    overflow: auto;
}

<div id="container">
<table id="codexpl">
    <tr>
        <th>#</th>
        <th>Columna</th>
        <th>Relative</th>
        <th>Isso</th>
    </tr>
    <tr>
        <td>1</td>
        <td>This</td>
        <td>Column</td>
        <td>Is</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Column</td>
        <td>two</td>
        <td>this</td>
    </tr>
    <tr>
        <td>3</td>
        <td>is</td>
        <td>not equals</td>
        <td>a</td>
    </tr>
    <tr>
        <td>4</td>
        <td>the</td>
        <td>Column</td>
        <td>real</td>
    </tr>
    <tr>
        <td>5</td>
        <td>first</td>
        <td>One</td>
        <td>Column</td>
    </tr>
</table>
</div>

Answer 3

将此添加到 css 文件中

::-webkit-scrollbar {
 display: none;
}

Answer 4

您需要做的就是将滚动条宽度设置为0

#container::-webkit-scrollbar {
width: 0px;
}

Answer 5

您可以使用 CSS 轻松实现它。

要隐藏滚动条，但仍能保持滚动，可以使用以下代码：

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE and Edge */
.hide-scrollbar {
  -ms-overflow-style: none;
}

我为您创建了这个 fiddle：http://jsfiddle.net/u105fbx4/

将 class="hide-scrollbar" 添加到您的 DIV 中，像这样。

HTML

<div id="container" class="hide-scrollbar">

这是 CSS 文件的结尾 :

 .hide-scrollbar::-webkit-scrollbar {
      display: none;
    }

    .hide-scrollbar {
      -ms-overflow-style: none;
    }

如何隐藏滚动条但保留溢出 table 的功能？

How can I hide the scrollbar but keep the functionality for my overflowing table?

html

css

html-table

overflow