Question

我创建了一个表（带有静态头文件），使用css和jquery，列宽根据表数据而变化（Headers也根据数据宽度而变化，这完全适用于Firefox，但它不起作用在IE和Chrome中，（列对齐在chrome和IE中无法正常工作），

任何人都可以帮我解决这个问题，我已经在互联网上尝试了很多例子，那些完全适用于固定列宽，

这是我用于此

的代码

CSS

.tablescroll
{ font: 12px normal Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; background-color:#fff; }

.tablescroll td, 
.tablescroll_wrapper,
.tablescroll_head,
.tablescroll_foot
{ border:1px solid #ccc; }

.tablescroll td
{ padding:3px 5px; }

.tablescroll_wrapper
{ border-left:0; }

.tablescroll_head
{ font-size:11px; font-weight:bold; background-color:#eee; border-left:0; border-top:0; margin-bottom:3px; }

.tablescroll thead td
{ border-right:0; border-bottom:0; }

.tablescroll tbody td
{ border-right:0; border-bottom:0; }

.tablescroll tbody tr.first td
{ border-top:0; }

.tablescroll_foot
{ font-weight:bold; background-color:#eee; border-left:0; border-top:0; margin-top:3px; }

.tablescroll tfoot td
{ border-right:0; border-bottom:0; }

的jQuery

;(function($){

    var scrollbarWidth = 0;

    // http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
    function getScrollbarWidth() 
    {
        if (scrollbarWidth) return scrollbarWidth;
        var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div></div>');
        $('body').append(div); 
        var w1 = $('div', div).innerWidth(); 
        div.css('overflow-y', 'auto');
        var w2 = $('div', div).innerWidth(); 
        $(div).remove(); 
        scrollbarWidth = (w1 - w2);
        return scrollbarWidth;
    }

    $.fn.tableScroll = function(options)
    {
        if (options == 'undo')
        {
            var container = $(this).parent().parent();
            if (container.hasClass('tablescroll_wrapper')) 
            {
                container.find('.tablescroll_head thead').prependTo(this);
                container.find('.tablescroll_foot tfoot').appendTo(this);
                container.before(this);
                container.empty();
            }
            return;
        }

        var settings = $.extend({},$.fn.tableScroll.defaults,options);

        // Bail out if there's no vertical overflow
        //if ($(this).height() <= settings.height)
        //{
        //  return this;
        //}

        settings.scrollbarWidth = getScrollbarWidth();

        this.each(function()
        {
            var flush = settings.flush;

            var tb = $(this).addClass('tablescroll_body');

            // find or create the wrapper div (allows tableScroll to be re-applied)
            var wrapper;
            if (tb.parent().hasClass('tablescroll_wrapper')) {
                wrapper = tb.parent();
            }
            else {
                wrapper = $('<div class="tablescroll_wrapper"></div>').insertBefore(tb).append(tb);
            }

            // check for a predefined container
            if (!wrapper.parent('div').hasClass(settings.containerClass))
            {
                $('<div></div>').addClass(settings.containerClass).insertBefore(wrapper).append(wrapper);
            }

            var width = settings.width ? settings.width : tb.outerWidth();

            wrapper.css
            ({
                'width': width+'px',
                'height': settings.height+'px',
                'overflow': 'auto'
            });

            tb.css('width',width+'px');

            // with border difference
            var wrapper_width = wrapper.outerWidth();
            var diff = wrapper_width-width;

            // assume table will scroll
            wrapper.css({width:((width-diff)+settings.scrollbarWidth)+'px'});
            tb.css('width',(width-diff)+'px');

            if (tb.outerHeight() <= settings.height)
            {
                wrapper.css({height:'auto',width:(width-diff)+'px'});
//              wrapper.css({height:'300',width:(width-diff)+'px'});
                flush = false;
            }

            // using wrap does not put wrapper in the DOM right 
            // away making it unavailable for use during runtime
            // tb.wrap(wrapper);

            // possible speed enhancements
            var has_thead = $('thead',tb).length ? true : false ;
            var has_tfoot = $('tfoot',tb).length ? true : false ;
            var thead_tr_first = $('thead tr:first',tb);
            var tbody_tr_first = $('tbody tr:first',tb);
            var tfoot_tr_first = $('tfoot tr:first',tb);

            // remember width of last cell
            var w = 0;

            $('th, td',thead_tr_first).each(function(i)
            {
                w = $(this).width();

                $('th:eq('+i+'), td:eq('+i+')',thead_tr_first).css('width',w+'px');
                $('th:eq('+i+'), td:eq('+i+')',tbody_tr_first).css('width',w+'px');
                if (has_tfoot) $('th:eq('+i+'), td:eq('+i+')',tfoot_tr_first).css('width',w+'px');
            });

            if (has_thead) 
            {
                var tbh = $('<table class="tablescroll_head" cellspacing="0"></table>').insertBefore(wrapper).prepend($('thead',tb));
            }

            if (has_tfoot) 
            {
                var tbf = $('<table class="tablescroll_foot" cellspacing="0"></table>').insertAfter(wrapper).prepend($('tfoot',tb));
            }

            if (tbh != undefined)
            {
                tbh.css('width',width+'px');

                if (flush)
                {
                    $('tr:first th:last, tr:first td:last',tbh).css('width',(w+settings.scrollbarWidth)+'px');
                    tbh.css('width',wrapper.outerWidth() + 'px');
                }
            }

            if (tbf != undefined)
            {
                tbf.css('width',width+'px');

                if (flush)
                {
                    $('tr:first th:last, tr:first td:last',tbf).css('width',(w+settings.scrollbarWidth)+'px');
                    tbf.css('width',wrapper.outerWidth() + 'px');
                }
            }
        });

        return this;
    };

    // public
    $.fn.tableScroll.defaults =
    {
        flush: true, // makes the last thead and tbody column flush with the scrollbar
        width: null, // width of the table (head, body and foot), null defaults to the tables natural width
        height: 100, // height of the scrollable area
        containerClass: 'tablescroll' // the plugin wraps the table in a div with this css class
    };

})(jQuery);

谢谢你， Udeshika

Answer 1

此插件似乎不再有效。

所以我觉得你的问题和这张票一样吗？ https://github.com/farinspace/jquery.tableScroll/issues/14

此插件将thead / tbody / tfoot拆分为单独的表，以实现固定的页眉/页脚效果。

尝试应用此更改：https://github.com/farinspace/jquery.tableScroll/pull/7

从Pull Request的描述（第3点）来看，这是有道理的，但我自己并没有这样做。

如果上述Pull Request不起作用，您将不得不推出自己的解决方案。

我之前使用过这个插件。我正在使用可排序+可调整大小的列来制作我自己的表，并且这个插件在固定页眉/页脚可滚动表方面似乎是一个不错的，简单的基础。

据我所知，这个插件只有一个意图：一个带有固定页眉/页脚的可滚动表。如果您期望更多功能，那么您需要开始寻找其他地方，或者开始编写自己的解决方案。

Answer 2

冻结表格标题

您可能必须为表头分隔表元素，为表体分隔另一个表元素。

你只需要几行jquery来使它工作，其余的CSS和HTML

$(function(){
    $(document).ready(function(){
        $('.tableBody').scroll(function(){
             $('.tableHeader table').css('margin-left', -    $('.tableBody').scrollLeft());
        });
    });
});

您可以在此链接上看到其余的代码示例：

Freezing the table header in jQuery

冻结表中的表头

2 个答案: