HTML table 边框容器内有滚动条

Question

我正在尝试设计一个带有卷轴的 HTML table。我试图做的设计是在它自己的容器内有一个滚动条，它有自己的边框。

我已经尝试了很多示例，但没有提出解决方案。我无法更改滚动条的视图。我试过的解决办法只是改变了thumb和track，根本无法给scrollbar做边框

有什么方法可以像上图一样创建滚动条吗？还是带边框的滚动条使其更粗？

编辑：

这是我的代码：

这是一个规则 table 元素即：

<table>
    <thead>
        <tr>
            <th>Header a<td/>
            <th>Header a</td>
            <th>Header b</td>
            <th>Header c</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell a</td>
            <td>Cell b</td>
            <td>Cell c</td>
        <tr/>
        <tr>
            <td>Cell a</td>
            <td>Cell b</td>
            <td>Cell c</td>
        <tr/>
        <tr>
            <td>Cell a</td>
            <td>Cell b</td>
            <td>Cell c</td>
        <tr/>
        <tr>
            <td>Cell a</td>
            <td>Cell b</td>
            <td>Cell c</td>
        <tr/>
    </tbody>
</table>

如果可能我只想通过css代码

实现

谢谢

Answer 1

要获得一个 html 滚动条，它是这样的：<div style="height:100px;overflow:auto;">..table code..</div>。

然后看看这篇文章：CSS customized scroll bar in div "Currently, there exists no cross-browser scroll bar CSS styling definitions."

但是，如果您想要 javascript 解决方案，请查看：http://jscrollpane.kelvinluck.com/

要回答您的问题，仅通过 CSS 是无法实现的。

Answer 2

跨浏览器有点问题，那么你需要javascript。但这是您开始使用 css 的开始。 webkit（也适用于 chrome）

注意：我添加了高度以强制滚动条。

    <style>
    table{
        width:300px;
        height:100px;   
        direction:rtl;
        overflow:auto;
        display:inline-block;
    }
    ::-webkit-scrollbar {  
        width: 20px;  
    }  
    ::-webkit-scrollbar-track {  
        background-color: #e8eae9;  
        border: 5px solid #d0dad9;  

    }  
    ::-webkit-scrollbar-thumb {  
        background-color: #a5d7de;  
        border-left: 5px solid #d0dadb;  
        border-right: 5px solid #d0dadb;  
    }  
    ::-webkit-scrollbar-thumb:hover {  
        background-color: #7cadb4;  
    }  
    :: scrollbar-track-piece {
        color: #red;  
    }
    tbody,thead,tr,th {
        direction:ltr ;
    }
    </style>

HTML table 边框容器内有滚动条

HTML table with scrollbar inside bordered container

html

css

scrollbar

html-table