带有两个固定列的 bootstrap 3 响应式表答案

【问题标题】：bootstrap 3 responsive table with two fixed column带有两个固定列的 bootstrap 3 响应式表
【发布时间】：2015-02-26 10:47:32
【问题描述】：

我正在使用this 回答来修复引导表中的第一列。

我想修复前两列，我需要对代码进行哪些更改？

【问题讨论】：

标签： css twitter-bootstrap-3

【解决方案1】：

更改此行$fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();

使用:nth-child() Selector到您想要的列

 $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();`
`$fixedColumn.find('th:not(:nth-child(2)),td:not(:nth-child(2))').remove();`

【讨论】：

【解决方案2】：

改变这一行 $fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();

使用 :nth-child() 选择器到您想要的列

$fixedColumn.find('th:not(:nth-child(-n+2)),td:not(:nth-child(-n+2))').remove();

【讨论】：

【解决方案3】：

换行

$fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();

有

$fixedColumn.find('th:not(:first-child,:nth-child(2)),td:not(:first-child,:nth-child(2)').remove();

请注意，您可以随意添加列

【讨论】：

【解决方案4】：

您可以根据需要为 pin n 列设置一个类：

var $table = $('.table-pinned');
var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');

$fixedColumn.find('th,td').not('.pinned').remove();

$fixedColumn.find('tr').each(function (i, elem) {
  $(this).height($table.find('tr:eq(' + i + ')').height());
});

这里fiddle

【讨论】：