使用Bootstrap使水平滚动固定一列? [英] Make one column fixed with horizontal scroll using Bootstrap?

问题描述

假设我有以下内容:

          <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的列)保持固定，因此无论用户水平滚动多少都始终可见?

I wish to add more table headers and ultimately make the table scrollable horizontally. Is it possible to make it so that the first column (the one containing the ID's) remains fixed and thus always visible regardless of how much the user has scrolled horizontally?

我希望使用jQuery插件实现以下目的: http://www.novasoftware.com/Download/jQuery_FixedTable/JQuery_FixedTable.aspx (此处实时演示: http://www.novasoftware.com/Download/jQuery_FixedTable/jQuery_FixedTable_Demo.htm )

What I wish to create has been achieved here using a jQuery plugin: http://www.novasoftware.com/Download/jQuery_FixedTable/JQuery_FixedTable.aspx (live demo here: http://www.novasoftware.com/Download/jQuery_FixedTable/jQuery_FixedTable_Demo.htm)

推荐答案

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

What you want to do is set the position of your first column to absolute. This will need to be applied to the first <td> tag in every row you have - easily done with a class. This also needs a width, and then a negative left margin of equal value to the width so that it gets placed on the left of your scrolling content.

然后，您需要为表创建一个包装器，并将其overflow-x设置为scroll.这使您的表格可以滚动.这也需要一个宽度-超出该宽度的任何内容都可以滚动.

You then need to create a wrapper for your table, and set its overflow-x to scroll. This allows your table to scroll. This, too, requires a width - anything beyond the width will be scrollable.

您可能要做的最后一件事是将white-space: nowrap添加到<th>和<td>元素中，以使单元格中的文本不会自动换行.

The last thing you will probably want to do is add white-space: nowrap to your <th> and <td> elements, so that the text in the cells do not wrap.

此处演示

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使水平滚动固定一列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！