滚动时修复了HTML表头

小编典典

滚动时修复了HTML表头

css

我具有以下表结构：

<table>   
<thead>   
    <tr>   
        <th colspan="4">Current</th>   
        <th colspan="4">New/Requested</th>   
    </tr>   
    <tr>   
        <th nowrap="nowrap">RSD &nbsp;&nbsp;&nbsp;&nbsp;</th>  
        <th nowrap="nowrap">CRSD &nbsp;&nbsp;&nbsp;&nbsp;</th>   
        <th nowrap="nowrap">MSD &nbsp;&nbsp;&nbsp;&nbsp;</th>   
        <th nowrap="nowrap">Open QTY &nbsp;&nbsp;&nbsp;&nbsp;</th>   
        <th nowrap="nowrap">CRD &nbsp;&nbsp;&nbsp;&nbsp;</th>   
        <th nowrap="nowrap">CRSD &nbsp;&nbsp;&nbsp;&nbsp;</th>  
        <th nowrap="nowrap">MSD &nbsp;&nbsp;&nbsp;&nbsp;</th>   
        <th nowrap="nowrap">Open QTY &nbsp;&nbsp;&nbsp;&nbsp;</th>   
        <th nowrap="nowrap">Action</th>   
        <th nowrap="nowrap">Reason</th>   
        <th nowrap="nowrap">Action Code Status </th>   
    </tr> 
    <tbody>
        <tr>
            <td></td>  
            <td></td>   
            .....plenty of rows
        </tr>
    </tbody>
</thead>   
</table>

我正在尝试修复标题，以便如果向下滚动它仍然可见，我怎样才能做到这一点？

阅读 263

2020-05-16

共1个答案

小编典典

为了达到我的目标，我编写了以下代码（如所问的那样）-

这是我写的插件。

(function ($) {
   $.fn.scrollbarTable = function (i) {
       var o = {};
       if (typeof (i) == 'number') o.height = i;
       else if (typeof (i) == 'object') o = i;
       else if (typeof (i) == 'undefined') o = {
           height: 300
       }
       return this.each(function () {
           var $t = $(this);
           var w = $t.width();
           $t.width(w - function (width) {
               var parent, child;
               if (width === undefined) {
                   parent = $('<div style="width:50px;height:50px;overflow:auto"><div style="height:50px;"></div></div>').appendTo('body');
                   child = parent.children();
                   width = child.innerWidth() - child.height(99).innerWidth();
                   parent.remove();
               }
               return width;
           }());
           var cols = [];
           var tableCols = [];
           $t.find('thead th,thead td').each(function () {
               cols.push($(this).width());
           });
           $t.find('tr:eq(1) th,thead td').each(function () {
               tableCols.push($(this).width());
           });
           var $firstRow = $t.clone();
           $firstRow.find('tbody').remove();
           $t.find('thead').remove();
           $t.before($firstRow);
           $firstRow.find('thead th,thead td').each(function (i) {
               $(this).attr('width', cols[i]);
           });
           $t.find('tr:first th,tr:first td').each(function (i) {
               $(this).attr('width', tableCols[i]);
           });
           var $wrap = $('<div>');
           $wrap.css({
               width: w,
               height: o.height,
               overflow: 'auto'
           });
           $t.wrap($wrap);
       })
   };
}(jQuery));

如何使用：

$(document).ready(function(){
    $('table#tabss').scrollbarTable();
}

希望能对某人有所帮助。

无论如何，感谢大家的支持… :)

2020-05-16