twitter-bootstrap 使用 Bootstrap 用水平滚动固定一列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36846478/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make one column fixed with horizontal scroll using Bootstrap?
提问by Sparks
Assuming I have the following:
假设我有以下内容：
<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>
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?
我希望添加更多表格标题并最终使表格可水平滚动。是否有可能使第一列（包含 ID 的列）保持固定并因此始终可见，无论用户水平滚动多少？
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)
我希望创建的内容已使用 jQuery 插件实现：http: //www.novasoftware.com/Download/jQuery_FixedTable/JQuery_FixedTable.aspx（现场演示：http: //www.novasoftware.com/Download/jQuery_FixedTable/ jQuery_FixedTable_Demo.htm)
回答by Tricky12
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.
您要做的是将第一列的位置设置为absolute. 这将需要应用于<td>您拥有的每一行中的第一个标签 - 使用类轻松完成。这还需要一个宽度，然后是一个与宽度相等的负左边距，以便将其放置在滚动内容的左侧。
You then need to create a wrapper for your table, and set its overflow-xto scroll. This allows your table to scroll. This, too, requires a width - anything beyond the width will be scrollable.
然后您需要为您的表创建一个包装器，并将其设置overflow-x为scroll. 这允许您的表格滚动。这也需要一个宽度 - 超出宽度的任何内容都可以滚动。
The last thing you will probably want to do is add white-space: nowrapto your <th>and <td>elements, so that the text in the cells do not wrap.
您可能想要做的最后一件事是添加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>
