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>元素中，以便单元格中的文本不会换行。

Demo Here

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>

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

1 个答案: