CSS 具有固定第一列的引导程序 3 响应表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19737306/
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
bootstrap 3 responsive table with fixed first column
提问by CGross
I am targeting mobile specifically so I have a Bootstrap responsive table. Its just a div with the bootstrap class "table-responsive" and a table nested inside with the classes "table table-striped table-bordered table-hover table-condensed".
我专门针对移动设备，所以我有一个 Bootstrap 响应表。它只是一个带有引导类“table-responsive”的 div 和一个嵌套在类“table table-striped table-bordered table-hover table-condensed”中的表格。
Is there any easy way to make sure that the first column is fixed (not scrolling horizontally)? On mobile devices, its likely that there will be scrolling every time but the first column contains what are essentially table headers.
有什么简单的方法可以确保第一列是固定的（不是水平滚动）？在移动设备上，很可能每次都会滚动，但第一列包含本质上是表格标题的内容。
回答by koala_dev
If you're only targeting mobile devices then this may work for you: you can clone the first column in your table and apply position:absoluteso it appears "in front" when you scroll the rest of the table.
如果您只针对移动设备，那么这可能对您有用：您可以克隆表格中的第一列并应用，position:absolute以便在滚动表格的其余部分时它会出现在“前面”。
For this you'd need some basic jquery code and a custom CSS class:
为此，您需要一些基本的 jquery 代码和自定义 CSS 类：
jQuery
jQuery
$(function(){
var $table = $('.table');
//Make a clone of our table
var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
//Remove everything except for first column
$fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();
//Match the height of the rows to that of the original table's
$fixedColumn.find('tr').each(function (i, elem) {
$(this).height($table.find('tr:eq(' + i + ')').height());
});
});
CSS
CSS
.table-responsive>.fixed-column {
position: absolute;
display: inline-block;
width: auto;
border-right: 1px solid #ddd;
background-color: #fff; /* bootstrap v3 fix for fixed column background color*/
}
@media(min-width:768px) {
.table-responsive>.fixed-column {
display: none;
}
}
Here's a working demofor this approach
这是这种方法的工作演示
