fixed column overlaps table column when using jScrollPane

Question

i have a table with a fixed column and i need to add jscrollpane to style the scrollbar.

Fiddle without jscrollpane

Below is the HTML code

<div class="table-wrapper scroll-pane">
    <table id="consumption-data" class="data ">
        <thead class="header">
            <tr>
                <th>Month</th>
                <th>Item 1</th>
                <th>Item 2</th>
                <th>Item 3</th>
                <th>Item 4</th>
            </tr>
        </thead>
        <tbody class="results">
            <tr>
                <th>Jan</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>
            <tr>
                <th>Feb</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>
            <tr>
                <th>Mar</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>
            <tr>
                <th>Apr</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>  
            </tr>
            <tr>    
                <th>May</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>
            <tr>
                <th>Jun</th>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
                <td>3163</td>
            </tr>


        </tbody>
    </table>
</div>

The CSS

.table-wrapper { 
    overflow-x:scroll;
    overflow-y:visible;
    width:250px;
    margin-left: 120px;
}


td, th {
    padding: 5px 20px;
    width: 100px;
}

th:first-child {
    position: absolute;
    left: 5px
}

This is the jScrollpane plugin im using

The problem is when i add the jScrollpane plugin the first column overlaps and moves along with the scroll bar

My jSfiddle

Can someone tell me how can i move the first column to the left and make it fixed with this plugin

Answer 1

remove this block from your css

th:first-child {
position: absolute;
left: 5px

}

its the position absolute :) check your updated fiddle now.

*** EDIT : use position fixed.

link edited

fiddle

Answer 2

Adding position:relative; to the wrapper along with adding position:fixed; to your th:first-child solves the problem nicely, and gets that first column fixed to the side without the following columns overlapping.

 .table-wrapper { 
    overflow-x:scroll;
    overflow-y:visible;
    width:250px;
    margin-left: 120px;
    position:relative;
}


td, th {
    padding: 5px 20px;
    width: 100px;
}

th:first-child {
    position: fixed;
    left: 5px
}

And here is a jsfiddle with smaller margins/widths to see the effect more clearly:

http://jsfiddle.net/8g5xu6az/