Vic Vic - 5 days ago 5
CSS Question

Fix First Column of a Bootstrap Table

I followed @koala_dev's code in this post to try to lock the first column s my table scrolls horizontally. The code unfortunately has no effect on my table. I was wondering if anyone could give me some pointers on what I have done wrong as I am new to programming.

This is my table:
http://jsfiddle.net/mademoiselletse/bypbqboe/59/

This is the code I inserted in JS (line 121-133):

$(function(){
var $tableClass = $('.table');
//Make a clone of our table
var $fixedColumn = $tableClass.clone().insertBefore($tableClass).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($tableClass.find('tr:eq(' + i + ')').height());
});
});


This is the CSS properties (line 36-47) I have inserted:

.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;
}
}


The only thing I deviated from the demo code was that I defined
$('.table')
as
$tableClass
instead of
$table
since I have previously defined
var $table
as
$('#table')
. Your help will be much appreciated!

Answer

Ok.. Remove all your js code and you can do this with some CSS tricks as below:

DEMO

CSS

.table > thead:first-child > tr:first-child > th:first-child {
    position: absolute;
    display: inline-block;
    background-color: red;
    height: 100%;
}

.table > tbody > tr > td:first-child {
    position: absolute;
    display: inline-block;
    background-color: red;
    height: 100%;
}

.table > thead:first-child > tr:first-child > th:nth-child(2) {
    padding-left: 40px;
}

.table > tbody > tr > td:nth-child(2) {
    padding-left: 50px !important;
}
Comments