Bootstrap 3 responsive table with first fixed column

Question

I followed this and this post to lock width of first column. Table is responsive and I want to achieve fixed width of first column when I resize the table. I tried Guruprasad's post, but it doesn't work.

jsfiddle

html

<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover table-condensed">
        <thead>
            <tr>
                <th>Number</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>First</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Second</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Third</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </tbody>
    </table>
</div>

css

.table>thead:first-child>tr:first-child>th:first-child
{
    position: absolute;
    display: inline-block;
    height:100%;
}
.table> tbody > tr > td:first-child
{
    position: absolute;
    display: inline-block;
    height:100%;

}
.table>thead:first-child>tr:first-child>th:nth-child(2)
{
    padding-left:40px;
}
.table> tbody > tr > td:nth-child(2)
{
    padding-left:50px !important;

}

Answer 1

I have edited your fiddle and did some changes like i removed display:inline-block and position and added fix width for that column so it will stay there.

.table>thead:first-child>tr:first-child>th:first-child
{
    height:auto;
    width:100px; /*change according to your need*/
}

For more details please check this link .