使用Bootstrap使用水平滚动固定一列？

Question

假设我有以下内容:

          <table class="table table-bordered table-striped table-hover">
            <thead>
            <tr>
                <th>#</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                /* ... more table headers */
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>ID 1</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>ID 2</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>
                /* ... more table rows */
            </tbody>
        </table>

我希望添加更多表头,并最终使表格可水平滚动.是否可以使第一列(包含ID的列)保持固定,因此无论用户水平滚动多少,都始终可见？

我想在这里创建的是使用jQuery插件:http://www.novasoftware.com/Download/jQuery_FixedTable/JQuery_FixedTable.aspx(现场演示:http: //www.novasoftware.com/Download/jQuery_FixedTable/ jQuery_FixedTable_Demo.htm)

Answer 1

您要做的是将第一列的位置设置为absolute.这将需要应用于<td>您拥有的每一行中的第一个标记 - 轻松完成一个类.这也需要一个宽度,然后是一个与宽度相等的负左边距,以便它放在滚动内容的左侧.

然后,您需要为表创建一个包装器,并将其设置overflow-x为scroll.这允许您的表滚动.这也需要宽度 - 超出宽度的任何东西都可以滚动.

你可能会想要做的最后一件事就是添加white-space: nowrap到您<th>和<td>元素,所以,在细胞中的文本不换行.

在这里演示

th, td {
    white-space: nowrap;
}

.first-col {
    position: absolute;
    width: 5em;
    margin-left: -5em;
}

.table-wrapper {
    overflow-x: scroll;
    width: 600px;
    margin: 0 auto;
}

<div class="container">
    <div class="table-wrapper">
        <table class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th class="first-col">#</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 class="first-col">ID 1</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                </tr>
                <tr>
                    <td class="first-col">ID 2</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>
</div>