带有边框容器内滚动条的 HTML 表格

Question

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

我尝试了很多示例，但没有提出解决方案。我无法更改滚动条的 View 。我试过的解决方案只改变了thumb和track，但我根本无法为滚动条制作边框。

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

编辑:

这是我的代码:

这是一个规则表元素即:

<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

跨浏览器有点问题，那就需要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>