html - 我可以锁定 Twitter Bootstrap 表中的第一列吗？

Question

我有一个用 Twitter bootstrap 构建的大型可滚动表格，但我想防止第一列滚动。这可能吗？

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

Answer 1

根据我之前的评论，这是一个可能的解决方案演示:

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