[html] Fix columns in horizontal scrolling

I am currently trying to fix my first column in a table when the user scrolls in the X-axis. I am using this structure:

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

            <tr>
                <th>...</th>
                <td>...</td>
            </tr>
        </tbody>
    </table>
</div>

The number of items will be picked by the user, i.e. it could be 90 items in the table. This will require scrolling in the X-axis. The question I have got though is:

How do I fix the position of the th tags inside the tbody (and the th:first-child in the thead)?

I have been looking at some other threads, however they do not really explain how I achieve the fixed columns which makes it hard for me to understand what the codes does and what I am supposed to do.

I have also checked on solutions where people split up the header-column in another table. This wont be possible for me because I will export the data to other systems later on.

My css:

.table-wrapper { 
    overflow-x:scroll;
    overflow-y:visible;
}

This fixes the scroll, now comes the work with:

tbody th, 
thead th:first-child {}

Anyone got any ideas?

EDIT: Here is a jsFiddle: http://jsfiddle.net/DJqPf/5/

Demo: http://www.jqueryscript.net/demo/jQuery-Plugin-For-Fixed-Table-Header-Footer-Columns-TableHeadFixer/

HTML

<h2>TableHeadFixer Fix Left Column</h2>

<div id="parent">
    <table id="fixTable" class="table">
        <thead>
            <tr>
                <th>Ano</th>
                <th>Jan</th>
                <th>Fev</th>
                <th>Mar</th>
                <th>Abr</th>
                <th>Maio</th>
                <th>Total</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2012</td>
                <td>110.00</td>
                <td>110.00</td>
                <td>110.00</td>
                <td>110.00</td>
                <td>110.00</td>
                <td>550.00</td>
            </tr>
            <tr>
                <td>2012</td>
                <td>110.00</td>
                <td>110.00</td>
                <td>110.00</td>
                <td>110.00</td>
                <td>110.00</td>
                <td>550.00</td>
            </tr>
            <tr>
                <td>2012</td>
                <td>110.00</td>
                <td>110.00</td>
                <td>110.00</td>
                <td>110.00</td>
                <td>110.00</td>
                <td>550.00</td>
            </tr>
            <tr>
                <td>2012</td>
                <td>110.00</td>
                <td>110.00</td>
                <td>110.00</td>
                <td>110.00</td>
                <td>110.00</td>
                <td>550.00</td>
            </tr>
            <tr>
                <td>2012</td>
                <td>110.00</td>
                <td>110.00</td>
                <td>110.00</td>
                <td>110.00</td>
                <td>110.00</td>
                <td>550.00</td>
            </tr>
        </tbody>
    </table>
</div>

JS

    $(document).ready(function() {
        $("#fixTable").tableHeadFixer({"head" : false, "right" : 1}); 
    });

CSS

    #parent {
        height: 300px;
    }

    #fixTable {
        width: 1800px !important;
    }

https://jsfiddle.net/5gfuqqc4/

Solved using JavaScript + jQuery! I just need similar solution to my project but current solution with HTML and CSS is not ok for me because there is issue with column height + I need more then one column to be fixed. So I create simple javascript solution using jQuery

You can try it here https://jsfiddle.net/kindrosker/ffwqvntj/

All you need is setup home many columsn will be fixed in data-count-fixed-columns parameter

<table class="table" data-count-fixed-columns="2" cellpadding="0" cellspacing="0">

and run js function

app_handle_listing_horisontal_scroll($('#table-listing'))