html - 使用 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>在您拥有的每一行中添加标签 - 使用类(class)轻松完成。这还需要一个宽度，然后是一个与宽度相等的负左边距，以便它位于滚动内容的左侧。

然后您需要为您的表创建一个包装器，并设置它的 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>