bootstrap 3 responsive table with fixed first column

Question

I am targeting mobile specifically so I have a Bootstrap responsive table. Its just a div with the bootstrap class "table-responsive" and a table nested inside with the classes "table table-striped table-bordered table-hover table-condensed".

Is there any easy way to make sure that the first column is fixed (not scrolling horizontally)? On mobile devices, its likely that there will be scrolling every time but the first column contains what are essentially table headers.

If you're looking for a way to achieve this in angular, see http://stackoverflow.com/a/33728417/111438 — niaher, Nov 23 '15 at 08:25

score 41 · Accepted Answer · edited Dec 27 '17 at 04:26

41

If you're only targeting mobile devices then this may work for you: you can clone the first column in your table and apply position:absolute so it appears "in front" when you scroll the rest of the table.

For this you'd need some basic jquery code and a custom CSS class:

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;
    background-color: #fff; /* bootstrap v3 fix for fixed column background color*/
}
@media(min-width:768px) {
    .table-responsive>.fixed-column {
        display: none;
    }
}

Here's a working demo for this approach

edited Dec 27 '17 at 04:26

neophyte

6,540
2
28
43

answered Nov 02 '13 at 07:15

omma2289

54,161
8
64
68

Thanks, this is really really close (and something I wouldn't have thought of given my limited jquery knowledge) but in cases with lots of rows (and thus vertical scrolling), it looks like this: http://i.imgur.com/j725O8r.png – CGross Nov 02 '13 at 13:10
@CGross try with `position:absolute;` instead of fixed – omma2289 Nov 03 '13 at 03:07
That doesn't seem to work very well with bootstrap 3.2. Here's a modified fiddle where the fixed columns overlap the original table: http://jsfiddle.net/gmsa/nt7fd965/1/ – Gus Aug 08 '14 at 14:08
1

@Gus seems like early v3 had a specified white background color for a responsive table but that is now removed, you can just add that to the CSS and it should look fine: http://jsfiddle.net/koala_dev/nt7fd965/2/ – omma2289 Aug 08 '14 at 17:03
1

@koala_dev you working demo(http://jsfiddle.net/4XG7T/3/) is not working on mobile!? – Florian Widtmann Dec 09 '14 at 12:21
Adapting the height of the original tables tr's didn't work for me on Chrome when the javascript was executed in document.ready(). Instead use window.load according to http://stackoverflow.com/a/12190618/865201 Works for me. – Hokascha Feb 25 '15 at 16:14
There is some render issue in Firefox 42, where is fixed column would be gone when the window resize. To repo, follow the step here: 1) Go to http://jsfiddle.net/4XG7T/3/ with Firefox. 2) Resize the windows, so you can scroll the table horizontally. 3) Scroll the table to the right. 4) Resize the table again. 5) The fixed column is gone. – Steven Dec 09 '15 at 17:50
How can I fix the header? – Ankush Rishi Jul 21 '16 at 11:18
This was a great answer! I also found that if you want to maintain the fixed column after a user resizes the page you can do wrap the JS in a function, include a `$(".table.fixed-column').remove()` to the top and add it to the $(window).resize() events – willwolfram18 Aug 01 '16 at 15:05
This does not work well when you have a large number of tables on one page. If you have multiple table you want to fix the first column for use this: http://jsfiddle.net/nt7fd965/148/ – agoldev Oct 03 '16 at 10:26
Does anyone solved it for mobile? After several hours I am running out of idea how to make it work on mobile :/ – Neli Chakarova Apr 01 '18 at 18:19

bootstrap 3 responsive table with fixed first column

1 Answers1

Linked