修复了滚动时的 html 表格标题

【问题标题】：Fixed html table header while scrolling修复了滚动时的 html 表格标题
【发布时间】：2011-09-25 22:20:56
【问题描述】：

我的表结构如下：

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

我正在尝试修复标题，以便向下滚动时它仍然可见。 我看了this post，但无法理解。我怎样才能做到这一点？

【问题讨论】：

  • 检查这个问题stackoverflow.com/questions/130564/…
  • 但我的表格正文不可滚动，当我滚动页面而不是表格正文时我想要这个
  • 我还在玩这个...
  • @Vivek - 你试过解决方案吗............你在哪个浏览器中工作？
  • @Vivek - 试试 jquery 插件并接受它是否适合你]

标签： javascript jquery html css html-table


【解决方案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();
}

希望它能帮助某个地方的人..

感谢大家的支持... :)

【讨论】：

  • 是的......我们必须等待两天才能接受自己的答案......那是你我花了时间接受这个。 :)
  • 与 Sreekesh Okky 相同的问题，table#tabss 是什么？
  • @Vivek #tabss 是什么？
  • tabss 是表 ID
【解决方案2】：

尝试这种方法，但它可能不是最好的方法

<table style="top: 0px; position: fixed; z-index: 1; background-color: White">   
    <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> 
</table>
<table>
   <tbody>
      <tr>
        <td></td>  
        <td></td>   
        .....plenty of rows
      </tr>
   </tbody>
 </table>

我所做的只是为标题创建了另一个表并给它固定位置

【讨论】：

    【解决方案3】：

    使用css

    .fixhead
{ 
    position:relative
    overflow:auto;
}

    并在gridview headerrowstyle标签中或中调用这个类。

    【讨论】：

      【解决方案4】：

      CSS部分----

       <style type="text/css">
    thead tr { position:relative; 
               top: expression(offsetParent.scrollTop); 
             }

  </style>

      HTML 部分----

      <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
    <thead>
     <tr>
      <td width="1%"></td>
      <td>ID</td>
      <td>Name</td>
     </tr>
    </thead>
    <tbody>
    //////////code
    </tbody>
    <tfoot>
    ////////code
    </tfott>
  </table>

      谢谢

      【讨论】：

      • 对不起，我是这个论坛的新手，所以不知道如何将代码粘贴到答案中。请不要介意。
      【解决方案5】：

      在 tbody 的 css 中设置溢出：auto。

      【讨论】：

        【解决方案6】：

        所以我不得不为我的工作创建一个类似的组件。 （注意：我承认我是用 jQuery 做的，但没有它仍然可以完成。）

        我想出的解决方案很相似，我想我会分享它，因为它更简单

        http://jsfiddle.net/YYaFr/6/

        基本上，您将table 包装在div 中，复制它（表格）并将第一个只是标题表格（通过删除tbody）并将其定位。

        <div class="containerdiv">
    <table class="headerTable">
        <colgroup>
            <col /> * number of columns
             ....
        </colgroup>
        <thead>
             <th></th>
             ....
        </thead>
    </table>
    <table class="dataTable">
        <colgroup>
            <col /> * number of columns
             ....
        </colgroup>
        <thead>
             <th></th>
             ....
        </thead>
        <tbody>
             <td></td>
             ....
        </tbody>
    </table>
</div>

        和css 

        div.containerDiv
{
    height: 300px; // Whatever height you need. can be set inline if you wish
}
div.containerDiv table.headerTable
{
    position: absolute;
}
div.containerDiv table.dataTable thead
{
    visibility: hidden; // This gives the header table room so it doesn't hide the first row.
}

        然后 JavaScript 基本上会创建 colgroups（或者如果需要，您可以在服务器端生成它们。）设置宽度和中提琴。在我看来，这似乎要简单得多，所以继续检查 jsfiddle。

        【讨论】：

        • hmm...这似乎是个好方法..但正如我在你的小提琴中看到的那样..标题边框和单元格边框没有对齐..所以扰乱了桌子的形状......让我知道你想如何解决这个问题。
        • @Vivek 在 Chrome 和 IE8 中进行了测试，它排成一行。你用的是什么浏览器？
        • @vivek 我刚刚在 Firefox 中进行了测试，但它没有对齐。与它计算宽度的方式有关吗？它创建 col 元素并设置其宽度的代码它为 chrome 中的边距/边框添加 6 个像素/即，在 Firefox 中这是 6，它是 5。
        【解决方案7】：

        我知道我迟到了，但 Mustafa OZCAN 的 jQuery Fixed Table Header Plugin 很棒。只需包含它以及 jQuery 本身，并将其设置为在您的表上工作，如下所示：

        <script type="text/javascript"> 
$(document).ready(function() { 
   $('#YourTable').fixedtableheader(); 
}); 
</script>

        将#YourTable 替换为您的 HTML 表格的 ID，剩下的工作由插件完成。

        【讨论】：

          【解决方案8】：

          唉，我多么羡慕那些开始使用 jQuery 的人。我为那些因应用程序限制而无法加载库的人创建了一个纯 javascript 和 CSS 解决方案。

          基本上，CSS 定位表格和表格标题行，并诱使表格表现得像 div。然后 javascript 操纵表格标题行的 CSS 定位和一个“掩码”div，当表格向上滚动时隐藏移动的行（改进是修改 javascript 以检测碰撞并隐藏向上滚动超过标题的行）。

          这种方法的缺点是您现在必须设置所有列的宽度。

          相关组件有：

          <!-- divs with IDs are manipulated with javascript -->
<div class="fixedTableHolder">

  <div class="maskHolder">
     <div id="mask" class="mask">&nbsp;</mask>
  </div>

  <div class="fixedTable">
    <div id="theTable" class="theTable">

       <!-- here is the table, header row must have an ID -->
       <table border="0" cellspacing="5" cellpadding="5"> 
          <tr id="thFixed" class="thFixed"> 
            <td class="col1">Header cell 1</td> 
          </tr>
          <tr>
            <td class="col1">regular cell</td>
          </tr>
       </table>
    </div>
  </div>
</div>

          这是 jsFiddle 中的一个演示：http://jsfiddle.net/deborah/Msvvr/

          【讨论】：

            【解决方案9】：

            嗯，希望有人会读到这篇文章，并节省一些时间 :) 我的目标是制作一个小（尽可能小）的 js，它将采用 tableID ，并将标题设置为固定。 它与这里给出的不同之处在于它使用 window.resize 重新计算宽度，因此它允许动态调整表格的大小，并且从一开始就没有使用固定大小。理论上 - 假设可以使用任何表格......（这是我的情况......）

            function HeadsUp()
{
    var headers = $("#TheGrid tr").first();
    headers.css("margin-top", ((headers.height()+1)*-1)+"px");//edit +1 with what you want...
    headers.css("position", "absolute");
}

function ResizeHeaders()
{
    var grid = $("#TheGrid");
    var headers = $("#TheGrid tr").first();
    var firstdatarow = $("#TheGrid tr:nth-child(2)");
    headers.width(grid.width());

    var s = firstdatarow.children("td");
    var d = headers.children("th");//replace with td if you use it there
    for(i=0; i<s.length; i+=1) {
        d[i].width = s[i].clientWidth;
    }
}

$(function () {
HeadsUp();
ResizeHeaders();
});

$( window ).resize(function() {
ResizeHeaders();
});

            【讨论】：

            • 如果有人像我一样在 SharePoint 中需要这些东西，请将 $(window).resize() 的最后一个绑定替换为 SP.UI.Workspace.add_resized(ResizeHeaders);
            【解决方案10】：

            对我有用的最佳选择是将以下 css 属性添加到样式表中的 th 类。

            th 
{
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 5;
}

            【讨论】：

            • 它会冻结标题
            猜你喜欢
            • 1970-01-01
            • 2018-01-10
            • 2017-07-11
            • 1970-01-01
            • 2017-04-11
            • 2012-01-04
            • 2018-12-11
            • 2013-06-18
            • 2016-10-26
            相关资源
            最近更新 更多
            热门标签
            Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode