Sticky table column

Created by: RichardNeill

In a responsive table, with lots of columns, it's often desirable to make the left-most column sticky, so it doesn't scroll off the page. I think this should be an option within bootstrap, in the same way that we can make the sticky. Sometimes, both the top row and left-col need to be sticky.

Here is how we do it at the moment: note that it seems to work "perfectly" in Chrome, but is broken in Firefox.

/* Sticky first column. NB Firefox Bug #1658119 means that we lose the td-borders! / table.sticky-x tr td:nth-child(1){ position: sticky; left: 0; z-index: 10; background-color: #fff; / Must set a color explicitly, else it is transparent to the text that scrolls by underneath / } table.sticky-x tr th:nth-child(1){ position: sticky; left: 0; z-index: 10; } table.sticky-x thead tr th:nth-child(1) { / top-left corner never moves - and we don't override the existing th-color either. / position: sticky; left: 0; top: 0; z-index: 12; } table.sticky-x.table-striped tr:nth-of-type(odd) td:nth-child(1) { background-color: #f2f2f2; / restore table-striped */ }

Thanks.