10

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

2 回答 2

12

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

演示：引导表上的固定列

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

这是相关的标记。此示例使用条带、有边框、精简的 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;
}
于 2012-07-05T15:12:53.180 回答
0

这是我对同一问题的解决方案的演示。您可以修复任何您想要的列。只需在表格上添加“固定列”类，在要保持固定的 th 和 td 上添加“固定列”。然后调用 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>

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

和CSS：

.table-responsive > .fixed-columns-fixed {
    position: absolute;
    display: inline-block;
    width: auto;
    border-right: 2px solid #ddd;
    background-color: #fff;
}
于 2014-11-19T19:14:05.443 回答