html – 我可以将第一列锁定在Twitter Bootstrap表中吗？

我有一个大的可滚动表,我用Twitter引导构建,但是希望防止第一列滚动.这可能吗？

<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>

解决方法

这是一个可能的解决方案的演示,基于我以前的评论：

DEMO: Fixed Column on Bootstrap Table

请注意,这并不是真正的测试,甚至是一个完整的解决方案来修复一个列,而是一个概念的证明,以供你建立.

这是相关的标记.此示例使用条带化,边界浓缩的Bootstrap表

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

和所需的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);
});​

和所需的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;
}