带边框的滚动条的HTML表格

Question

我尝试使用滚动设计HTML表格。 我试图制作的设计是一个自己的容器内的滚动条，它有一个自己的边框。

我尝试了很多例子并没有提出解决方案。我无法更改滚动条的视图。我试过的解决方案只改变了拇指和轨道，但我根本无法为滚动条创建边框。

有没有办法像上图所示创建滚动条？或者带边框的滚动条使其更大胆？

修改

这是我的代码：

它是一个规则表元素 即：

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

Answer 2

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

看一下这篇文章：CSS customized scroll bar in div “目前，还没有跨浏览器滚动条的CSS样式定义。”

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

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