引导程序3响应表与固定的第一列

我专门针对手机，所以我有一个Bootstrap响应表。 它只是一个引导类“table-responsive”和一个嵌套在类“table table-striped table-bordered table-hover table-condensed”中的表格。

有没有简单的方法来确保第一列是固定的（不水平滚动）？ 在移动设备上，每次都可能会滚动，但第一列包含基本上是表头。

Answer 1

如果您只定位到移动设备，那么这可能适合您：您可以克隆表格中的第一列，并应用position:absolute以便在滚动表格的其余部分时显示在“前面”。

为此，你需要一些基本的jQuery代码和一个自定义的CSS类：

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

 .table-responsive>.fixed-column { position: absolute; display: inline-block; width: auto; border-right: 1px solid #ddd; } @media(min-width:768px) { .table-responsive>.fixed-column { display: none; } } 

这是一个这种方法的工作演示