bootstrap 3 responsive table with two fixed column

Question

i'm using this answer to fixed my first columns inside bootstrap table.

i want to make the first TWO columns fixed, what do i need to change on the code?

Answer 1

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

to your desired column with :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();`

Answer 2

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

to your desired column with :nth-child() Selector

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

Answer 3

Change the line

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

With

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

Notice that you can keep adding up columns as you please

Answer 4

You can set a class for pin n columns as you prefer:

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());
});

Here fiddle