0

我创建了一个表（带有静态标题），使用 css 和 jquery，列宽根据表数据更改（标题也根据数据宽度更改，这在 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);

谢谢你，乌德西卡

4

2 回答 2

0

这个插件似乎不再活跃了。

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

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

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

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

如果上述拉取请求不起作用，您将不得不推出自己的解决方案。

我以前用过这个插件。我正在用可排序+可调整大小的列制作自己的表格，从固定页眉/页脚可滚动表格的角度来看，这个插件似乎是一个足够体面、简单的基础。

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

于 2013-05-07T08:02:08.863 回答
0

冻结表头

您可能必须将表头的表元素和表体的其他表元素分开。

您只需要几行 jquery 即可使其工作，其余的 CSS 和 HTML

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

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

冻结jQuery中的表头

于 2017-07-24T07:36:58.567 回答