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

Can I lock the first column in a Twitter Bootstrap Table?

提问by user1216398

I have a large scroll-able table I built with Twitter bootstrap but would like prevent the first column from scrolling. Is this possible?

我有一个使用 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>

回答by Hymanwanders

Here's a demo of a possible solution, based on my earlier comment:

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

DEMO: Fixed Column on Bootstrap Table

演示：引导表上的固定列

Note that this isn't really tested or even a complete solution for fixing a column, but rather a proof of concept for you to build on.

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

Here is the relevant markup. This example uses a striped, bordered, condensed Bootstrap table

这是相关的标记。此示例使用条纹、边框、压缩的 Bootstrap 表

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

And the required jQuery:

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

and the needed CSS:

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

回答by jacbmelo

Here is a fiddlewith a demo of my solution for this same problem. You can fix any columns you want. Just add the class "fixed-columns" on the table and "fixed-column" on the th and td you want to keep fixed. Then call responsiveTables.init() to do the rest. I opted to change the id's on the original table in order to keep it compatible with JSF events.

这里是一个小提琴与我这个相同的问题解决方案的演示。您可以修复您想要的任何列。只需在表上添加“固定列”类，并在要保持固定的 th 和 td 上添加“固定列”。然后调用responsiveTables.init() 来完成剩下的工作。我选择更改原始表上的 id，以使其与 JSF 事件兼容。

Here is the HTML:

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

Here is the Javascript:

这是Javascript：

    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();

And the CSS:

和 CSS：

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