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

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

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

One Solution collect form web for “引导程序3响应表与固定的第一列”

如果您只定位到移动设备,那么这可能适合您:您可以克隆表格中的第一列,并应用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; } } 

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

  • Twitter Bootstrap和ASP.NET GridView
  • Bootstrap中的容器,行和跨度之间的差异
  • 引导程序3:保持页面上选定的选项卡刷新
  • 如何使twitter bootstrap子菜单在左侧打开?
  • 必须Bootstrap容器元素包含行元素?
  • Twitter Bootstrap - 在行之间添加顶部空间
  • 如何在twitter-bootstrap模式窗口中插入一个Django表单?
  • 一次引导转盘多个帧
  • Twitter Bootstrap将活动类添加到li
  • 引导下拉式气泡alignment(不是右键)
  • Twitter引导使用的closures符号的unicode字符是什么?