HTML table with scrollbar inside bordered container

Question

I'm trying to design an HTML table, with a scroll. The design I'm trying to make is a scrollbar inside its own container, which has a border of itself.

The scrollbar I'm willing to create

I've tried lots of examples and didn't come up with a solution. I couldn't change the view of the scrollbar. The solutions I tried only changed the thumb and track, but I couldn't at all make a border for the scrollbar.

Is there any way I can create a scrollbar like in the picture above? Or otherwise a scrollbar with a border to make it bolder?

Edit:

This is my code:

It's a regulat table element i.e.:

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

If its possible I want to achieve it by only css code

Thanks

Please post your code, and I'll take a look. – now_world Mar 12 '15 at 21:44 — now_world, Mar 12 '15 at 21:44

score 1 · Accepted Answer · answered Mar 12 '15 at 23:18

cross browser is a little problem, then you need javascript. but here is a start for you to play with using only css. webkit (works also in chrome)

note: i added the height to force a scrollbar.

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

score 0 · Answer 2 · edited May 23 '17 at 12:22

To just get a html scrolllbar it's this: <div style="height:100px;overflow:auto;">..table code..</div>.

And take a look at this article: CSS customized scroll bar in div "Currently, there exists no cross-browser scroll bar CSS styling definitions."

However if you want the javascript solution take a look at: http://jscrollpane.kelvinluck.com/

To answer your question there is no way of achieving this only through CSS.

HTML table with scrollbar inside bordered container

2 Answers2