Html 我可以锁定Twitter引导表中的第一列吗？

我有一个大的可滚动表，我用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>

';      
可乐
可乐
可乐
数据1
数据2
数据3

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

请注意，这并不是真正经过测试的，甚至不是修复列的完整解决方案，而是供您构建的概念证明

下面是相关的标记。本例使用一个带条带边框的压缩引导表

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

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

下面是我解决这个问题的演示。您可以修复所需的任何列。只需在表中添加类“fixed columns”，在th和td中添加类“fixed column”，即可保持固定。然后调用responsiveTables.init（）完成其余的工作。我选择更改原始表上的id，以使其与JSF事件兼容

以下是HTML：

<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover fixed-columns">
        <thead>
            <tr>
                <th class="fixed-column">#</th>
                ...
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="fixed-column">1</td>
                ...
            </tr>
            ...
        </tbody>
    </table>
</div>

和CSS：

.table-responsive > .fixed-columns-fixed {
    position: absolute;
    display: inline-block;
    width: auto;
    border-right: 2px solid #ddd;
    background-color: #fff;
}

---

不使用引导。使用一些聪明的CSS定位和填充可能是可行的，但根据我的经验，当表格单元格从文档流中取出时，它会变得不稳定。大多数基于javascript的粘性头插件实际上创建了第二个表，其中只包含页面上固定的头行，而原始表在其下方滚动。这里可能需要类似的解决方案。我必须添加style=“overflow-x:scroll；”以最终尝试您的解决方案。但绝对位置似乎不会冻结窗格。

    var responsiveTables = {
    init: function() {
        $(document).find('.fixed-columns').each(function (i, elem) {
            responsiveTables.fixColumns(elem);
        });     
    },

    fixColumns: function(table, columns) {
        var $table = $(table);
        $table.removeClass('fixed-columns');
        var $fixedColumns = $table.clone().attr('id', $table.attr('id') + '-fixed').insertBefore($table).addClass('fixed-columns-fixed');

    $fixedColumns.find('*').each(function (i, elem) {
        if ($(this).attr('id') !== undefined) {
                $table.find("[id='" + $(this).attr("id") + "']").attr('id', $(this).attr('id') + '-hidden');
            }
            if ($(this).attr('name') !== undefined) {
                $table.find("[name='" + $(this).attr("name") + "']").attr('name', $(this).attr('name') + '-hidden');
            }
        });

        if (columns !== undefined) {
            $fixedColumns.find('tr').each(function (x, elem) {
                $(elem).find('th,td').each(function (i, elem) {
                    if (i >= columns) {
                        $(elem).remove();    
                    }
                });
            });
        } else {
            $fixedColumns.find('tr').each(function (x, elem) {
                $(elem).find('th,td').each(function (i, elem) {
                    if (!$(elem).hasClass('fixed-column')) {
                        $(elem).remove();    
                    }
                });
            });
        }

        $fixedColumns.find('tr').each(function (i, elem) {
            $(this).height($table.find('tr:eq(' + i + ')').height());
        });        
    }
};

responsiveTables.init();

.table-responsive > .fixed-columns-fixed {
    position: absolute;
    display: inline-block;
    width: auto;
    border-right: 2px solid #ddd;
    background-color: #fff;
}