滚动时修复HTML表头

Question

我有一个退出很长的HTML表，我需要通过滚动修复标题，我已经找到了很多很多插件和技巧，但没有一个对我有效。

我猜想没有对我有用的原因是由于：

1. 所有解决方案都从表中分离了标题
2. 它们为每列使用固定宽度以适合将标题保持在内容的顶部
3. 我的表非常敏感，可以拉伸以获得整个宽度（ width=100% ）

有人有建议吗？

编辑：感谢ashley我更新了我的css技术

我的hmlt表看起来完全像： http ： //jsfiddle.net/enPZP/4/

Answer 1

我想我想出了一个相当不错的问题解决方案，它比我想要的要深一点，但我对结果非常满意。

它的工作方式是文档就绪，克隆表头，将克隆的大小设置为表头的大小，并将其放在另一个头的顶部。 滚动时如果窗口顶部低于表格顶部，我们将克隆top设置在窗口顶部。 在调整大小时，我们重新计算<th>大小。

请注意，我将<th>放入<thead>中。

的jsfiddle

var tableBaseTop;
var originalHeader;
var floatingHeader;

$(document).ready(function () {
    tableBaseTop = $('table th').offset().top;
    originalHeader = $('thead');
    floatingHeader = originalHeader.clone();
    floatingHeader
        .css('position', 'absolute')
        .css('top', 0);

    setFloatingHeaderSize();

    $('table').prepend(floatingHeader);

    $(window).scroll(function () {
        var windowTop = $(window).scrollTop();

        if (windowTop > tableBaseTop)
            floatingHeader.css('top', windowTop - tableBaseTop);
        else
            floatingHeader.css('top', 0);
    });

    $(window).resize(setFloatingHeaderSize);
});

function setFloatingHeaderSize() {
    var originalThs = originalHeader.find('th');
    var floatingThs = floatingHeader.find('th');
    for (var i = 0; i < originalThs.length; i++) {
        floatingThs.eq(i)
            .css('width', originalThs.eq(i).width())
            .css('height', originalThs.eq(i).height());
    }
}

Firefox标题宽度问题

我设法解决了这个问题，但我无法弄清楚如何使用jQuery的助手来解决这个问题。 问题是，当实际的宽度/高度是小数时，jQuery给了我整数大小，我需要它们作为浮点数。 这是我用一个工作小提琴改变的代码部分。

的jsfiddle

function setFloatingHeaderSize() {
    var originalThs = originalHeader.find('th');
    var floatingThs = floatingHeader.find('th');
    for (var i = 0; i < originalThs.length; i++) {
        var padding = 
            parseFloat(window.getComputedStyle(this.originalThs[i], null).getPropertyValue('padding-left').replace('px', ''), 10) +
            parseFloat(window.getComputedStyle(this.originalThs[i], null).getPropertyValue('padding-right').replace('px', ''), 10);

        floatingThs.eq(i)
            .css('width', this.originalThs[i].offsetWidth - padding)
            .css('height', this.originalThs[i].offsetHeight - padding);
    }
}

更新：我在提出解决方案后立即将其转换为可重用的库， 在GitHub上查看 。

Answer 2

我已经修改了你的摆弄这个修复该头到网格的顶部。 但它确实有将瓷砖固定在左上方的缺点。

希望这能帮助您获得完整答案。

table {
    width: 100%;
    border-collapse: collapse;
    position: relative;
}
div.scoll {
    overflow: scroll;
    height: 300px;
}
.center {
    text-align: center;
}
thead {
    position: static;
    width: 100%;
}
thead tr {
    position: fixed;
}

并改变你的HTML看起来像

<div class="scoll">
<table>
        <thead>
            <tr>
                <th>Code</th>
                <th>Rank</th>
                <th>Code</th>
                <th>Icon</th>
                <th>Message Text</th>
                <th>Progress</th>
                <th>Current</th>
                <th>X</th>
                <th>Y</th>
                <th>Z</th>
                <th>W</th>
                <th>Result</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="12">&nbsp;</td>
            </tr>
            <tr class="data-row" id="19">
                <td class="center">DDD</td>
                <!-- 4 alpha numeric -->
                <td class="center">111</td>
                <!-- 3 digits -->
                <td class="center">222</td>
                <!-- 3 digits -->
                <td class="center">
                    <img width="20" height="20" src="http://cdn1.iconfinder.com/data/icons/CrystalClear/128x128/apps/ark2.png">
                    <!-- icon -->
                </td>
                <td>Lorem ipsum</td>
                <!-- text may be long -->
                <td class="center">333</td>
                <!-- 3 alpha numeric -->
                <td class="center">444</td>
                <!-- 3 alpha numeric -->
                <td class="center">555</td>
                <!-- 3 alpha numeric -->
                <td class="center">666</td>
                <!-- 3 alpha numeric -->
                <td class="center">777</td>
                <!-- 3 alpha numeric -->
                <td class="center">888</td>
                <!-- 3 alpha numeric -->
                <td class="center">999</td>
                <!-- 3 alpha numeric -->
            </tr>
</tbody>
</table>
</div>

Answer 3

将头行分隔到另一个表并添加一些jquery代码：

HTML：

<table class="headtable">
<tr>
    <td>name</td>
    <td>value</td>
    <td>action</td>
</tr>
</table>
<div class="scrolltable">
    <table class="valuetable">
        <tr>
            <td>hay 1</td>
            <td>1</td>
            <td>edit</td>
        </tr>
<tr>
            <td>hay 1</td>
            <td>1</td>
            <td>edit</td>
        </tr>
        <tr>
            <td>hay 1</td>
            <td>1</td>
            <td>edit</td>
        </tr>
        <tr>
            <td>hay 1</td>
            <td>1</td>
            <td>edit</td>
        </tr>
        </table>
</div>

js代码：

$('.headtable tr').children().each(function(index)
    {      
      $(this).width($('.valuetable tr:first td').eq(index).width());
    });

风格如果需要：

.scrolltable{height:500px; overflow:auto;}

如果你想要它自动调整大小（负责）：

$(window).resize(function(){
$('.headtable tr').children().each(function(index)
        {      
          $(this).width($('.valuetable tr:first td').eq(index).width());
        });
});

Answer 4

如果可以接受固定高度的列标题，则可以使用纯CSS解决此问题。

这是一个配置流体表宽度和自动列宽的示例，就像OP的表一样： jsFiddle

请注意，垂直滚动条仅在该示例中仅在必要时出现，因此您可能必须调整框架的大小才能看到它。

下面的代码与小提琴相同，但具有固定的桌面高度。 只要有足够的行超出指定的高度，滚动条就会始终显示在该配置中：

HTML

<div class="scrollingtable">
  <div>
    <div>
      <table>
        <caption>Top Caption</caption>
        <thead>
          <tr>
            <th><div label="Column 1"/></th>
            <th><div label="Column 2"/></th>
            <th><div label="Column 3"/></th>
            <th>
              <!--more versatile way of doing column label; requires 2 identical copies of label-->
              <div><div>Column 4</div><div>Column 4</div></div>
            </th>
            <th class="scrollbarhead"/> <!--ALWAYS ADD THIS EXTRA CELL AT END OF HEADER ROW-->
          </tr>
        </thead>
        <tbody>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
          <tr><td>Lorem ipsum</td><td>Dolor</td><td>Sit</td><td>Amet consectetur</td></tr>
        </tbody>
      </table>
    </div>
    Faux bottom caption
  </div>
</div>

---

CSS

<!--[if lte IE 9]><style>.scrollingtable > div > div > table {margin-right: 17px;}</style><![endif]-->
<style>
/*the following html and body rule sets are required only if using a % width or height*/
html {
  width: 100%;
  height: 100%;
}
body {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 20px 0 20px;
    text-align: center;
}
.scrollingtable {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  width: auto; /*if you want a fixed width, set it here, else set to auto*/
  min-width: /*0*/100%; /*if you want a % width, set it here, else set to 0*/
  height: /*188px*/100%; /*set table height here; can be fixed value or %*/
  min-height: /*0*/104px; /*if using % height, make this large enough to fit scrollbar arrows + caption + thead*/
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 16px;
  line-height: 20px;
  padding: 20px 0 20px 0; /*need enough padding to make room for caption*/
  text-align: left;
}
.scrollingtable * {box-sizing: border-box;}
.scrollingtable > div {
  position: relative;
  border-top: 1px solid black;
  height: 100%;
  padding-top: 20px; /*this determines column header height*/
}
.scrollingtable > div:before {
  top: 0;
  background: cornflowerblue; /*header row background color*/
}
.scrollingtable > div:before,
.scrollingtable > div > div:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  left: 0;
}
.scrollingtable > div > div {
  min-height: /*0*/43px; /*if using % height, make this large enough to fit scrollbar arrows*/
  max-height: 100%;
  overflow: /*scroll*/auto; /*set to auto if using fixed or % width; else scroll*/
  overflow-x: hidden;
  border: 1px solid black; /*border around table body*/
}
.scrollingtable > div > div:after {background: white;} /*match page background color*/
.scrollingtable > div > div > table {
  width: 100%;
  border-spacing: 0;
  margin-top: -20px; /*inverse of column header height*/
  margin-right: 17px; /*uncomment if using % width*/
}
.scrollingtable > div > div > table > caption {
  position: absolute;
  top: -20px; /*inverse of caption height*/
  margin-top: -1px; /*inverse of border-width*/
  width: 100%;
  font-weight: bold;
  text-align: center;
}
.scrollingtable > div > div > table > * > tr > * {padding: 0;}
.scrollingtable > div > div > table > thead {
  vertical-align: bottom;
  white-space: nowrap;
  text-align: center;
}
.scrollingtable > div > div > table > thead > tr > * > div {
  display: inline-block;
  padding: 0 6px 0 6px; /*header cell padding*/
}
.scrollingtable > div > div > table > thead > tr > :first-child:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 20px; /*match column header height*/
  border-left: 1px solid black; /*leftmost header border*/
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div > div:first-child,
.scrollingtable > div > div > table > thead > tr > * + :before {
  position: absolute;
  top: 0;
  white-space: pre-wrap;
  color: white; /*header row font color*/
}
.scrollingtable > div > div > table > thead > tr > * > div[label]:before,
.scrollingtable > div > div > table > thead > tr > * > div[label]:after {content: attr(label);}
.scrollingtable > div > div > table > thead > tr > * + :before {
  content: "";
  display: block;
  min-height: 20px; /*match column header height*/
  padding-top: 1px;
  border-left: 1px solid black; /*borders between header cells*/
}
.scrollingtable .scrollbarhead {float: right;}
.scrollingtable .scrollbarhead:before {
  position: absolute;
  width: 100px;
  top: -1px; /*inverse border-width*/
  background: white; /*match page background color*/
}
.scrollingtable > div > div > table > tbody > tr:after {
  content: "";
  display: table-cell;
  position: relative;
  padding: 0;
  border-top: 1px solid black;
  top: -1px; /*inverse of border width*/
}
.scrollingtable > div > div > table > tbody {vertical-align: top;}
.scrollingtable > div > div > table > tbody > tr {background: white;}
.scrollingtable > div > div > table > tbody > tr > * {
  border-bottom: 1px solid black;
  padding: 0 6px 0 6px;
  height: 20px; /*match column header height*/
}
.scrollingtable > div > div > table > tbody:last-of-type > tr:last-child > * {border-bottom: none;}
.scrollingtable > div > div > table > tbody > tr:nth-child(even) {background: gainsboro;} /*alternate row color*/
.scrollingtable > div > div > table > tbody > tr > * + * {border-left: 1px solid black;} /*borders between body cells*/
</style>

---

必须更改背景颜色并删除边框，使其看起来与OP的表格完全相同 。 可以在CSS注释中找到进行这些类型更改的说明。

在这里查看我的答案以获得备用配置，并在同一篇文章中查看d-Pixie的答案，以获得用于冻结标题行的基本技术的解释。