CSS或JavaScript（JQuery）表的Stickyheader [英] CSS or JavaScript (JQuery) Stickyheader for table

问题描述

所以基本上，有很多粘性标题浮动的例子。我使用了一个javascript方法，它适用于包含几行（100-150）的表。一旦它击中600-700 +行，javascript会保持加载，也许在10-15秒后，你会看到你的结果。

现在你可以想象这不安静用户友好，因为耐心是罕见的，当它涉及到我的客户。

我猜猜为什么脚本运行缓慢，它只是不能处理的金额数据。该脚本必须克隆表并删除其中一个的头部和身体在另一个 - 可以滚动内容，并看到一个粘性的标题。

总结一下，使我的问题清楚：什么是最有效的方式（在速度方面高效）创建一个带有粘性（浮动）头的表？

感谢

th 内的 div 和包装器 div.container

所以stick标题实际上是 div s th 中。他们坚持，因为他们 position：absolute 和滚动属于包装器。

  var rows = $（'tbody tr'）; for（var i = 0; i <300; i ++）{rows.clone（）。appendTo（$（'tbody'））;}  

  html，body {margin：0; padding：0; height：100％;} section {position：relative; border：1px solid＃000; padding-top：37px; background：＃500;} section.positioned {position：absolute; top：100px; left：100px; width：800px; box-shadow：0 0 15px＃333;}。container {overflow-y：auto; height：200px;} table {border-spacing：0; width：100％;} td + td {border-left：1px solid #eee;} td，th {border-bottom：1px solid #eee;背景：#ddd; color：＃000; padding：10px 25px;} th {height：0; line-height：0; padding-top：0; padding-bottom：0;颜色：透明; border：none; white-space：nowrap;} th div {position：absolute;背景：透明; color：#fff; padding：9px 25px; top：0; margin-left：-25px; line-height：normal; border-left：1px solid＃800;} th：first-child div {border：none;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< ; section class => < div class =container> < table> < aad> < tr class =header> < th>表属性名称< div>表属性名称< / div> < / th> < th>值< div>值< / div> < / th> < th>说明< div>说明< / div> < / th> < / tr> < / thead> < tbody> < tr> < td> align< / td> < td>左，中，右< / td> < td> HTML5不支持。在HTML 4.01中已弃用。根据周围文字指定表格的对齐方式< / td> < / tr> < tr> < td> bgcolor< / td> < td> rgb（x，x，x），＃xxxxxxx，colorname< / td> < td> HTML5不支持。在HTML 4.01中已弃用。指定表格的背景颜色< / td> < / tr> < tr> < td> border< / td> < td> 1，< / td> < td>指定表格单元格是否应该有边框< / td> < / tr> < tr> < td> cellpadding< / td> < td> pixels< / td> < td> HTML5不支持。指定单元格墙和单元格内容之间的空格< / td> < / tr> < tr> < td> cellspacing< / td> < td> pixels< / td> < td> HTML5不支持。指定单元格之间的空格< / td> < / tr> < tr> < td> frame< / td> < td> void，above，below，hsides，lhs，rhs，vsides，box，border< / td> < td> HTML5不支持。指定应显示外部边框的哪些部分< / td> < / tr> < tr> < td> rules< / td> < td> none，groups，rows，cols，all< / td> < td> HTML5不支持。指定应该可见的内部边框的哪些部分< / td> < / tr> < tr> < td> summary< / td> < td> text< / td> < td> HTML5不支持。指定表格内容的摘要< / td> < / tr> < tr> < td> width< / td> < td>像素，％< / td> < td> HTML5不支持。指定表格的宽度< / td> < / tr> < / tbody> < / table> < / div>< / section>  

知道谁创建了这个小提琴，但这是源：（重复部分我添加）

https://jsfiddle.net/dPixie/byB9d/3/light/

so basically, there are a lot of examples for sticky headers floating around. I used a javascript approach which works fine for a table containing a couple of rows (100-150). As soon as it hits 600-700+ rows the javascript keeps loading and maybe after 10-15 seconds you see your results.

now you can imagin that this is not quiet user friendly, as patience is rare when it comes to my customers.

My guess on why the script runs slower would be, that it just can't handle the amount of data. the script has to clone the table and removes the head on one of them and the body on the other one - making it possible to scroll through the content and see a sticky header.

to sum it all up and make my question clear: what is the most efficient way (efficient in terms of speed) to create a table with a sticky (floating) header? Is it even possible to do it with CSS only so I don't have to use the JS?

Thanks

解决方案

The trick is the divs inside the th and the wrapper div.container

So the "stick" header is actually the divs inside the th. They sticks because their position:absolute and the scroller belong to the wrapper.

This is absolutely not a generic solution but it can be a solution for the simpler cases.

var rows = $('tbody tr');
for (var i = 0; i < 300; i++) {
	rows.clone().appendTo($('tbody'));
}

html, body{
  margin:0;
  padding:0;
  height:100%;
}
section {
  position: relative;
  border: 1px solid #000;
  padding-top: 37px;
  background: #500;
}
section.positioned {
  position: absolute;
  top:100px;
  left:100px;
  width:800px;
  box-shadow: 0 0 15px #333;
}
.container {
  overflow-y: auto;
  height: 200px;
}
table {
  border-spacing: 0;
  width:100%;
}
td + td {
  border-left:1px solid #eee;
}
td, th {
  border-bottom:1px solid #eee;
  background: #ddd;
  color: #000;
  padding: 10px 25px;
}
th {
  height: 0;
  line-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: transparent;
  border: none;
  white-space: nowrap;
}
th div{
  position: absolute;
  background: transparent;
  color: #fff;
  padding: 9px 25px;
  top: 0;
  margin-left: -25px;
  line-height: normal;
  border-left: 1px solid #800;
}
th:first-child div{
  border: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="">
  <div class="container">
    <table>
      <thead>
        <tr class="header">
          <th>
            Table attribute name
            <div>Table attribute name</div>
          </th>
          <th>
            Value
            <div>Value</div>
          </th>
          <th>
            Description
            <div>Description</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>align</td>
          <td>left, center, right</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
        </tr>
        <tr>
          <td>bgcolor</td>
          <td>rgb(x,x,x), #xxxxxx, colorname</td>
          <td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
        </tr>
        <tr>
          <td>border</td>
          <td>1,""</td>
          <td>Specifies whether the table cells should have borders or not</td>
        </tr>
        <tr>
          <td>cellpadding</td>
          <td>pixels</td>
          <td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
        </tr>
        <tr>
          <td>cellspacing</td>
          <td>pixels</td>
          <td>Not supported in HTML5. Specifies the space between cells</td>
        </tr>
        <tr>
          <td>frame</td>
          <td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
          <td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
        </tr>
        <tr>
          <td>rules</td>
          <td>none, groups, rows, cols, all</td>
          <td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
        </tr>
        <tr>
          <td>summary</td>
          <td>text</td>
          <td>Not supported in HTML5. Specifies a summary of the content of a table</td>
        </tr>
        <tr>
          <td>width</td>
          <td>pixels, %</td>
          <td>Not supported in HTML5. Specifies the width of a table</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>

I don't know who created this fiddle but this is the source: (The repeat part I added)

https://jsfiddle.net/dPixie/byB9d/3/light/

这篇关于CSS或JavaScript（JQuery）表的Stickyheader的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！