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;

}

please check this one..http://jsfiddle.net/0t6t21rg/7/ let me know if its not work for you... — Leo the lion, Aug 26 '15 at 08:57
@Nameismy yes i tried, but it doesn't work. The first column is too narrow, if you fill cells with longer text, you can see that first column hasn't fixed width when you resize the table. — Matt, Aug 26 '15 at 09:10
@Leothelion thank you, it works :) You can post it as answer and i can mark it as solution :) — Matt, Aug 26 '15 at 09:12
th:first-child, tr td:first-child { width: 20px !important; } — BENARD Patrick, Aug 26 '15 at 09:17

score 3 · Accepted Answer · answered Aug 26 '15 at 09:20

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 .

score 0 · Answer 2 · answered Aug 26 '15 at 08:32

0

<table class="table table-striped table-bordered table-hover table-condensed table-responsive">
</table>

answered Aug 26 '15 at 08:32

jayesh sojitra

19
2

Where is first fixed col ? – BENARD Patrick Aug 26 '15 at 09:14

Bootstrap 3 responsive table with first fixed column

2 Answers2