jquery - 具有第一个固定列的 Bootstrap 3 响应表

Question

我按照这个和这个帖子来锁定第一列的宽度。表格是响应式的，我想在调整表格大小时实现第一列的固定宽度。我尝试了 Guruprasad 的帖子，但它不起作用。

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

我已经编辑了您的小提琴并进行了一些更改，例如我删除display:inline-block并定位并为该列添加了固定宽度，因此它将保留在那里。

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

有关更多详细信息，请查看此 链接。

Answer 2

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