Bootstrap 3 个响应 table 第一个固定列

Question

我关注了this and 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 post，但是没用。

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

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

Answer 2

我已经编辑了您的 fiddle 并做了一些更改，例如我删除了 display:inline-block 和位置，并为该列添加了固定宽度，以便它保留在那里。

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

有关详细信息，请查看此 link。

Bootstrap 3 个响应 table 第一个固定列

Bootstrap 3 responsive table with first fixed column

css

jquery

twitter-bootstrap

twitter-bootstrap-3

responsiveness