Make one column fixed with horizontal scroll using Bootstrap?

Question

Assuming I have the following:

          <table class="table table-bordered table-striped table-hover">
            <thead>
            <tr>
                <th>#</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                <th>Table heading</th>
                /* ... more table headers */
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>ID 1</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>ID 2</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
                /* ... more table rows */
            </tbody>
        </table>

I wish to add more table headers and ultimately make the table scrollable horizontally. Is it possible to make it so that the first column (the one containing the ID's) remains fixed and thus always visible regardless of how much the user has scrolled horizontally?

What I wish to create has been achieved here using a jQuery plugin: http://www.novasoftware.com/Download/jQuery_FixedTable/JQuery_FixedTable.aspx (live demo here: http://www.novasoftware.com/Download/jQuery_FixedTable/jQuery_FixedTable_Demo.htm)

Answer 1

What you want to do is set the position of your first column to absolute. This will need to be applied to the first <td> tag in every row you have - easily done with a class. This also needs a width, and then a negative left margin of equal value to the width so that it gets placed on the left of your scrolling content.

You then need to create a wrapper for your table, and set its overflow-x to scroll. This allows your table to scroll. This, too, requires a width - anything beyond the width will be scrollable.

The last thing you will probably want to do is add white-space: nowrap to your <th> and <td> elements, so that the text in the cells do not wrap.

Demo Here

th, td {
    white-space: nowrap;
}

.first-col {
    position: absolute;
    width: 5em;
    margin-left: -5em;
}

.table-wrapper {
    overflow-x: scroll;
    width: 600px;
    margin: 0 auto;
}

<div class="container">
    <div class="table-wrapper">
        <table class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th class="first-col">#</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                    <th>Table heading</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="first-col">ID 1</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                </tr>
                <tr>
                    <td class="first-col">ID 2</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                    <td>Table cell</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>