固定html表头，滚动时 [英] Fixed html table header while scrolling

问题描述

我有以下表结构：

 < table& 
< thead> 
< tr> 
< th colspan =4>目前< / th> 
< th colspan =4>新/请求< / 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>打开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>打开QTY& nbsp;& nbsp;& nbsp;& nbsp;< / th> 
< th nowrap =nowrap> Action< / th> 
< th nowrap =nowrap>原因< / th> 
< th nowrap =nowrap>操作代码状态< / th> 
< / tr> 
< tbody> 
< tr> 
< td>< / td> 
< td>< / td> 
 ..... many of rows 
< / tr> 
< / tbody> 
< / thead> 
< / table> 
  

我试图修复标题，如果我向下滚动它保持可见。
我查看了此帖，但无法理解。我如何做到这一点？

解决方案

我写了以下代码以实现我的目标
$ b

这是我写的插件。

 （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; 
 （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 .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'）每个（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（）; 
} 
 

希望它可以帮助某人。

方式感谢大家的支持...：）

I have the following table structure:

<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> 

I am trying to fix the header so that if I scroll down it stays visible. I looked at this post but couldn't understand it. How can I do this?

解决方案

I have written the following code in order to achieve my goal (as asked in question)-

Here is the plugin i have written.

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

How to use:

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

hope it will help someone somewhere..

Any way thanks to all of you for your kind support... :)

这篇关于固定html表头，滚动时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！