10

I have a large scroll-able table I built with Twitter bootstrap but would like prevent the first column from scrolling. Is this possible?

<div class="row">
    <div class="span12" style="height: auto !important;overflow-x: scroll;">';      
        <table class="table table-striped table-bordered table-condensed">
        <thead>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
        </thead>
        <tbody>
        <tr>
            <td>data 1</td>
            <td>data 2</td>
            <td>data 3</td>
       </tr>
       </tbody>
       </table>
    </div>
</div>
1
  • not with Bootstrap. it might be possible with some clever CSS positioning and padding, but in my experience, table cells get wonky when taken out of the document flow. Most javascript-based sticky header plugins actually create a second table containing only the header row which is fixed on the page, while the original table scrolls underneath it. A similar solution may be required here. Jul 5, 2012 at 14:26

2 Answers 2

12

Here's a demo of a possible solution, based on my earlier comment:

DEMO: Fixed Column on Bootstrap Table

Note that this isn't really tested or even a complete solution for fixing a column, but rather a proof of concept for you to build on.

Here is the relevant markup. This example uses a striped, bordered, condensed Bootstrap table

<div id="scroller">
    <table class="table table-striped table-bordered table-condensed">
        <thead>
            ...
        </thead>
        <tbody>
            ...
        </tbody>
    </table>
</div>

And the required jQuery:

    $('#scroller table').each(function(){
    var table = $(this),
        fixedCol = table.clone(true),
        fixedWidth = table.find('th').eq(0).width(),
        tablePos = table.position();

    // Remove all but the first column from the cloned table
    fixedCol.find('th').not(':eq(0)').remove();
    fixedCol.find('tbody tr').each(function(){
        $(this).find('td').not(':eq(0)').remove();
    });

    // Set positioning so that cloned table overlays
    // first column of original table
    fixedCol.addClass('fixedCol');
    fixedCol.css({
        left: tablePos.left,
        top: tablePos.top
    });

    // Match column width with that of original table
    fixedCol.find('th,td').css('width',fixedWidth+'px');

    $('#scroller').append(fixedCol);
});​

and the needed CSS:

#scroller {
    width: 300px;
    overflow-x: scroll;
}
#scroller table {
    /* just a quick hack to make the table overflow the containing div
       your method may differ */
    width: 600px;
}

#scroller .table.fixedCol {
    width: auto;
    position: absolute;
    /* below styles are specific for borderd Bootstrap tables
       to remove rounded corners on cloned table */
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
       -moz-border-radius-topright: 0px;
       -moz-border-radius-bottomright: 0px;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
}
.table.fixedCol th,
.table.fixedCol td {
    /* background is set to white to hide underlaying column
       of original table */
    background: white;
}
1
  • I ahve to add style="overflow-x: scroll;" to <div id="scroller"> Finally <div id="scroller" style="overflow-x: scroll;">
    – inye
    Feb 21, 2014 at 3:23
0

Here is a fiddle with a demo of my solution for this same problem. You can fix any columns you want. Just add the class "fixed-columns" on the table and "fixed-column" on the th and td you want to keep fixed. Then call responsiveTables.init() to do the rest. I opted to change the id's on the original table in order to keep it compatible with JSF events.

Here is the HTML:

<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover fixed-columns">
        <thead>
            <tr>
                <th class="fixed-column">#</th>
                ...
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="fixed-column">1</td>
                ...
            </tr>
            ...
        </tbody>
    </table>
</div>

Here is the Javascript:

    var responsiveTables = {
    init: function() {
        $(document).find('.fixed-columns').each(function (i, elem) {
            responsiveTables.fixColumns(elem);
        });     
    },

    fixColumns: function(table, columns) {
        var $table = $(table);
        $table.removeClass('fixed-columns');
        var $fixedColumns = $table.clone().attr('id', $table.attr('id') + '-fixed').insertBefore($table).addClass('fixed-columns-fixed');

    $fixedColumns.find('*').each(function (i, elem) {
        if ($(this).attr('id') !== undefined) {
                $table.find("[id='" + $(this).attr("id") + "']").attr('id', $(this).attr('id') + '-hidden');
            }
            if ($(this).attr('name') !== undefined) {
                $table.find("[name='" + $(this).attr("name") + "']").attr('name', $(this).attr('name') + '-hidden');
            }
        });

        if (columns !== undefined) {
            $fixedColumns.find('tr').each(function (x, elem) {
                $(elem).find('th,td').each(function (i, elem) {
                    if (i >= columns) {
                        $(elem).remove();    
                    }
                });
            });
        } else {
            $fixedColumns.find('tr').each(function (x, elem) {
                $(elem).find('th,td').each(function (i, elem) {
                    if (!$(elem).hasClass('fixed-column')) {
                        $(elem).remove();    
                    }
                });
            });
        }

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

responsiveTables.init();

And the CSS:

.table-responsive > .fixed-columns-fixed {
    position: absolute;
    display: inline-block;
    width: auto;
    border-right: 2px solid #ddd;
    background-color: #fff;
}
1
  • I tried your solution. But position absolute doesn't seems to freeze panes.
    – Vikash B
    Jan 5, 2015 at 9:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.