JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<div class="container-fluid">
    <div class="row-fluid">
        <div id="scroller">
        <table class="table table-striped table-bordered table-condensed">
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Larry</td>
                    <td>Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
        </div>
        
            <p>Some content below table, eget condimentum. Nullam dapibus dolor ut dui dapibus ac placerat metus auctor. Sed venenatis, sapien vel pulvinar luctus, velit leo interdum risus, sit amet hendrerit metus felis sit amet lacus. Phasellus fermentum, est et vulputate elementum, mauris ante mollis leo, et aliquet nibh libero at ligula. Proin purus justo, adipiscing non varius ac, posuere ut odio. Nulla facilisi. Curabitur elit nulla, consectetur sit amet porttitor quis, accumsan id velit. Aenean ornare fermentum nisl ac viverra.</p>
    </div>
</div>

CSS

body { margin-top: 20px; }

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

JavaScript

$('#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);
});