Horizontally Scrollable Table With Twitter Bootstrap

I have a page with a table that can have different number of columns. It is product comparison page and user can select up to 10 products to compare. I am using twitter bootstrap v

Solution 1:

Actually I solved the main problem this way:

<divclass="row"><divclass="span12"style="overflow: auto"><tableclass="table table-bordered"><thead><th>Column 1</th><th>Column 2</th><th>Column 3</th><th>Column 4</th><th>Column 5</th><th>Column 6</th><th>Column 7</th><th>Column 8</th><th>Column 9</th><th>Column 10</th></thead><tbody><tr><td>Row1 Column1</td><td>Row1 Column2</td><td>Row1 Column3</td><td>Row1 Column4</td><td>Row1 Column5</td><td>Row1 Column6</td><td>Row1 Column7</td><td>Row1 Column8</td><td>Row1 Column9</td><td>Row1 Column10</td></tr><tr><td>Row2 Column1</td><td>Row2 Column2</td><td>Row2 Column3</td><td>Row2 Column4</td><td>Row2 Column5</td><td>Row2 Column6</td><td>Row2 Column7</td><td>Row2 Column8</td><td>Row2 Column9</td><td>Row2 Column10</td></tr><tr><td>Row3 Column1</td><td>Row3 Column2</td><td>Row3 Column3</td><td>Row3 Column4</td><td>Row3 Column5</td><td>Row3 Column6</td><td>Row3 Column7</td><td>Row3 Column8</td><td>Row3 Column9</td><td>Row3 Column10</td></tr><tr><td>Row4 Column1</td><td>Row4 Column2</td><td>Row4 Column3</td><td>Row4 Column4</td><td>Row4 Column5</td><td>Row4 Column6</td><td>Row4 Column7</td><td>Row4 Column8</td><td>Row4 Column9</td><td>Row4 Column10</td></tr><tr><td>Row5 Column1</td><td>Row5 Column2</td><td>Row5 Column3</td><td>Row5 Column4</td><td>Row5 Column5</td><td>Row5 Column6</td><td>Row5 Column7</td><td>Row5 Column8</td><td>Row5 Column9</td><td>Row5 Column10</td></tr></tbody></table></div></div>

So if anyone know how to freeze first column I would really appreciate it

Solution 2:

For fixed columns and scrollbars for datatables

Get the FixedHeader plug-in and then

$(document).ready( function () {
    var oTable = $('#example').dataTable( {
        "sScrollX":       "100%",
        "sScrollXInner":  "150%",
        "sScrollY":       "250px",
        "bScrollCollapse": true,
        "bPaginate":       false
    } );
     newFixedColumns( oTable, {
         "iColumns": 2
     } );
} );

reference