Javascript AngularJS固定标题可滚动表指令

我陷入了一个涉及固定标题表的问题。我使用AngularJS fixed header scrollable table指令来构建具有固定标题的表。一旦输入并删除搜索/筛选项（页面顶部的字段）->所有TR行不填充页面宽度（100%）。提示：TD宽度由px值设置为静态

我已经贴了一张照片

指令代码

/**
 * AngularJS fixed header scrollable table directive
 * @author Jason Watmore <jason@pointblankdevelopment.com.au> (http://jasonwatmore.com)
 * @version 1.2.0
 */
(function () {
    angular
        .module('anguFixedHeaderTable', [])
        .directive('fixedHeader', fixedHeader);

    fixedHeader.$inject = ['$timeout'];

    function fixedHeader($timeout) {
        return {
            restrict: 'A',
            link: link
        };

        function link($scope, $elem, $attrs, $ctrl) {
            var elem = $elem[0];

            // wait for data to load and then transform the table
            $scope.$watch(tableDataLoaded, function(isTableDataLoaded) {
                if (isTableDataLoaded) {
                    transformTable();
                }
            });

            function tableDataLoaded() {
                // first cell in the tbody exists when data is loaded but doesn't have a width
                // until after the table is transformed
                var firstCell = elem.querySelector('tbody tr:first-child td:first-child');
                return firstCell && !firstCell.style.width;
            }

            function transformTable() {
                // reset display styles so column widths are correct when measured below
                angular.element(elem.querySelectorAll('thead, tbody, tfoot')).css('display', '');

                // wrap in $timeout to give table a chance to finish rendering
                $timeout(function () {
                    // set widths of columns
                    angular.forEach(elem.querySelectorAll('tr:first-child th'), function (thElem, i) {

                        var tdElems = elem.querySelector('tbody tr:first-child td:nth-child(' + (i + 1) + ')');
                        var tfElems = elem.querySelector('tfoot tr:first-child td:nth-child(' + (i + 1) + ')');

                        var columnWidth = tdElems ? tdElems.offsetWidth : thElem.offsetWidth;
                        if (tdElems) {
                            tdElems.style.width = columnWidth + 'px';
                        }
                        if (thElem) {
                            thElem.style.width = columnWidth + 'px';
                        }
                        if (tfElems) {
                            tfElems.style.width = columnWidth + 'px';
                        }
                    });

                    // set css styles on thead and tbody
                    angular.element(elem.querySelectorAll('thead, tfoot')).css('display', 'block');

                    angular.element(elem.querySelectorAll('tbody')).css({
                        'display': 'block',
                        'height': $attrs.tableHeight || 'inherit',
                        'overflow': 'auto'
                    });

                    // reduce width of last column by width of scrollbar
                    var tbody = elem.querySelector('tbody');
                    var scrollBarWidth = tbody.offsetWidth - tbody.clientWidth;
                    if (scrollBarWidth > 0) {
                        // for some reason trimming the width by 2px lines everything up better
                        scrollBarWidth -= 2;
                        var lastColumn = elem.querySelector('tbody tr:first-child td:last-child');
                        lastColumn.style.width = (lastColumn.offsetWidth - scrollBarWidth) + 'px';
                    }
                });
            }
        }
    }
})();

/**
*AngularJS固定标题可滚动表指令
*@作者杰森·沃特莫尔(http://jasonwatmore.com)
*@version 1.2.0
*/
（功能（）{
有棱角的
.module（'anguFixedHeaderTable'，[]）
.指令（'fixedHeader'，fixedHeader）；
fixedHeader.$inject=['$timeout']；
函数fixedHeader（$timeout）{
返回{
限制：“A”，
链接：链接
};
函数链接（$scope、$elem、$attrs、$ctrl）{
var elem=$elem[0]；
//等待数据加载，然后转换表
$scope.$watch（表数据加载，函数（isTableDataLoaded）{
如果（isTableDataLoaded）{
可转换（）；
}
});
函数tableDataLoaded（）{
//加载数据时，tbody中的第一个单元格存在，但没有宽度
//直到表被转换之后
var firstCell=elem.querySelector（'tbody tr:first child td:first child'）；
返回firstCell&！firstCell.style.width；
}
函数转换表（）{
//重置显示样式，以便在下面测量时列宽是正确的
元素（元素querySelectorAll（'thead，tbody，tfoot'））.css（'display'，''）；
//换行$timeout以使表有机会完成渲染
$timeout（函数（）{
//设置列的宽度
angular.forEach（elem.querySelectorAll（'tr:first child th'），function（thElem，i）{
var tdElems=elem.querySelector（'tbody tr:first child td:nth child（+（i+1）+'）；
var tfElems=elem.querySelector（'tfoot tr:first child td:nth child（+（i+1）+'）；
var columnWidth=tdElems？tdElems.offsetWidth:thElem.offsetWidth；
if（tdElems）{
tdElems.style.width=columnWidth+'px'；
}
如果（thElem）{
thElem.style.width=columnWidth+'px'；
}
if（tfElems）{
tfElems.style.width=columnWidth+'px'；
}
});
//在AD和tbody上设置css样式
元素（elem.querySelectorAll（'thead，tfoot'））.css（'display'，'block'）；
angular.element（elem.querySelectorAll（'tbody'））.css({
“显示”：“块”，
“高度”：$attrs.tableHeight | |“继承”，
“溢出”：“自动”
});
//按滚动条的宽度减少最后一列的宽度
var tbody=元素查询选择器（'tbody'）；
var scrollBarWidth=tbody.offsetWidth-tbody.clientWidth；
如果（滚动条宽度>0）{
//出于某种原因，将宽度修剪2倍会使所有东西排列得更好
滚动条宽度-=2；
var lastColumn=elem.querySelector（'tbody tr:first child td:last child'）；
lastColumn.style.width=（lastColumn.offsetWidth-scrollBarWidth）+px'；
}
});
}
}
}
})();

我认为fixed在这里是一个错误的术语，如果您希望标题延伸到tbody的宽度，那么fixed是指fitplus，我认为您的watch函数非常不清楚，因为您为第一个参数返回了一个布尔值，而它应该是要监视的范围元素的名称。为什么不使用angular？遇到了同样的问题。有人找到解决办法了吗？看起来plunker仍在显示问题。