具有固定(冻结)列和标题的HTML表

I've been searching over the web for the way to make a table with fixed (frozen) columns and header. Seems like I finally found the solution and modified it to my needs.

我一直在网上搜索如何用固定的(冻结的)列和页眉创建表。看来我终于找到了解决方案并根据我的需要进行了修改。

There original fiddle is here.

原来的小提琴在这里。

Here is my modified solution. I tested it in Chrome (version: 55.0.2883.87 m) and Firefox (version: 51.0.1).

这是我修改过的解。我在Chrome(版本:55.0.2883.87 m)和Firefox(版本:51.0.1)进行了测试。

The problem is that it works not completely in IE (version: 11.0.9600.18427). During the horizontal scrolling a frozen part of the header is getting scrolled too. Could someone help me to make it working in IE? And one more question: is the approach safe to use? I mean if it's using some unspecified behavior, then some of the future browsers or even some of the modern browsers might display my table in a wrong way, and it's better to use a safe solution with a few different tables and synchronizing scroll position and rows height. UPD: one more question: how to make this work stable on the mobile devices?

问题是它在IE中不能完全工作(版本:11.0.9600.18427)。在水平滚动中，页眉的冻结部分也会被滚动。有人能帮我在IE中工作吗?还有一个问题:使用这种方法安全吗?我的意思是，如果它使用了一些未指定的行为，那么一些未来的浏览器，甚至一些现代的浏览器可能会以错误的方式显示我的表，最好使用一些不同的表和同步滚动位置和行高度的安全解决方案。UPD:还有一个问题:如何在移动设备上稳定工作?

Here is some code that demonstrates the approach:

以下是一些演示该方法的代码:

$(document).ready(function() {
  $('tbody').scroll(function(e) { //detect a scroll event on the tbody
  	/*
    Setting the thead left value to the negative valule of tbody.scrollLeft will make it track the movement
    of the tbody element. Setting an elements left value to that of the tbody.scrollLeft left makes it maintain 			it's relative position at the left of the table.    
    */
    $('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling
    $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first cell of the header
    $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
  });
});

.container {
  height:200px; 
  width:400px;
  overflow: hidden;
}

table {
  position: relative;
  background-color: #aaa;
  border-collapse: collapse;
table-layout: fixed;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}


/*thead*/
thead {
  position: relative;
  display: block; /*seperates the header from the body allowing it to be positioned*/
}

thead th {
  background-color: #99a;
  min-width: 120px;
  border: 1px solid #222;
}

thead th:nth-child(1) {/*first cell in the header*/
  position: relative;
  background-color: #88b;
}


/*tbody*/
tbody {
  flex: 1;
  position: relative;
  display: block; /*seperates the tbody from the header*/
  overflow: auto;
}

tbody td {
  background-color: #bbc;
  min-width: 120px;
  border: 1px solid #222;
}

tbody tr td:nth-child(1) {  /*the first cell in each tr*/
  position: relative;
  background-color: #99a;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">

  <table>
    <thead>
      <tr>
        <th>Name<br/>123</th>
        <th>Town</th>
        <th>County</th>
        <th>Age</th>
        <th>Profession</th>
        <th>Anual Income</th>
        <th>Matital Status</th>
        <th>Children</th>
      </tr>
       <tr>
        <th>Name</th>
        <th>Town</th>
        <th>County</th>
        <th>Age<br/>123<br/>321</th>
        <th>Profession</th>
        <th>Anual Income</th>
        <th>Matital Status</th>
        <th>Children</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Smith</td>
        <td>Macelsfield</td>
        <td>Cheshire<br/>123</td>
        <td>52</td>
        <td>Brewer</td>
        <td>£47,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Jenny Jones<br/>123<br/>312</td>
        <td>Threlkeld</td>
        <td>Cumbria</td>
        <td>34</td>
        <td>Shepherdess</td>
        <td>£28,000</td>
        <td>Single</td>
        <td>0</td>
      </tr>
      <tr>
        <td>Peter Frampton</td>
        <td>Avebury</td>
        <td>Wiltshire</td>
        <td>57</td>
        <td>Musician</td>
        <td>£124,000</td>
        <td>Married</td>
        <td>4</td>
      </tr>
      <tr>
        <td>Simon King</td>
        <td>Malvern</td>
        <td>Worchestershire</td>
        <td>48</td>
        <td>Naturalist</td>
        <td>£65,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Lucy Diamond</td>
        <td>St Albans</td>
        <td>Hertfordshire</td>
        <td>67</td>
        <td>Pharmasist</td>
        <td>Retired</td>
        <td>Married</td>
        <td>3</td>
      </tr>
      <tr>
        <td>Austin Stevenson</td>
        <td>Edinburgh</td>
        <td>Lothian </td>
        <td>36</td>
        <td>Vigilante</td>
        <td>£86,000</td>
        <td>Single</td>
        <td>Unknown</td>
      </tr>
      <tr>
        <td>Wilma Rubble</td>
        <td>Bedford</td>
        <td>Bedfordshire</td>
        <td>43</td>
        <td>Housewife</td>
        <td>N/A</td>
        <td>Married</td>
        <td>1</td>
      </tr>
      <tr>
        <td>Kat Dibble</td>
        <td>Manhattan</td>
        <td>New York</td>
        <td>55</td>
        <td>Policewoman</td>
        <td>$36,000</td>
        <td>Single</td>
        <td>1</td>
      </tr>
      <tr>
        <td>Henry Bolingbroke</td>
        <td>Bolingbroke</td>
        <td>Lincolnshire</td>
        <td>45</td>
        <td>Landowner</td>
        <td>Lots</td>
        <td>Married</td>
        <td>6</td>
      </tr>
      <tr>
        <td>Alan Brisingamen</td>
        <td>Alderley</td>
        <td>Cheshire</td>
        <td>352</td>
        <td>Arcanist</td>
        <td>A pile of gems</td>
        <td>Single</td>
        <td>0</td>
      </tr>
    </tbody>
  </table>
  
</div>
</body>

4 个解决方案

#1

This is very peculiar. It appears that the problematic code is this line:

这是非常特殊的。似乎有问题的代码是这样的:

$('thead').css("left", -$("tbody").scrollLeft()); //fix the thead relative to the body scrolling

It looks like IE11 handles relative positioning of nested elements differently (than Chrome and other browsers). In this case, you are positioning thead with relative positioning with an offset. You are also positioning thead th (it's children) with an offset and relative positioning. Chrome appears to be positioning thead relative to table, and then positioning th relative to thead. IE11, on the other hand, appears to be positioning thead relative to table, and then th just inherits that same positioning regardless of its own positioning.

看起来IE11处理嵌套元素的相对定位不同(Chrome和其他浏览器)。在这种情况下，您是用一个偏移量对广告进行相对定位。您还将thead th(它的子元素)定位为偏移位置和相对位置。Chrome似乎定位了相对于桌子的广告，然后定位相对于广告。另一方面，IE11似乎是将ad相对于table进行定位，然后不管它自己的位置如何，它都继承了相同的位置。

A fix for this would be the following: on IE11, handle the positioning differently for thead. Instead of setting the positioning on the parent thead, set the positioning on the thead th elements. In that way, your first column will not be 'forced' to inherit thead's positioning (in IE).

解决这个问题的方法如下:在IE11上，对thead的定位处理不同。与其在父thead上设置位置，不如在thead th元素上设置位置。这样，您的第一列就不会“*”继承thead的位置(在IE中)。

$(document).ready(function() {
  var isIE11 = !!navigator.userAgent.match(/Trident.*rv\:11\./);
  var customScroller;
  if (isIE11)
    customScroller = function() {
      $('thead th').css("left", -$("tbody").scrollLeft()); //if using IE11, fix the th element 
    };
  else
    customScroller = function() {
      $('thead').css("left", -$("tbody").scrollLeft()); //if not using IE11, fix the thead element
    };

  $('tbody').scroll(function(e) { //detect a scroll event on the tbody
    /*
    Setting the thead left value to the negative valule of tbody.scrollLeft will make it track the movement
    of the tbody element. Setting an elements left value to that of the tbody.scrollLeft left makes it maintain             it's relative position at the left of the table.    
    */
    customScroller(); //fix the thead relative to the body scrolling
    $('thead th:nth-child(1)').css("left", $("tbody").scrollLeft());
//fix the first cell of the header
    $('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()); //fix the first column of tdbody
  });
});

Here is a full example with your code, showing different handlings based on the browser:

下面是你的代码的一个完整示例，显示了基于浏览器的不同操作:

https://jsfiddle.net/8tx4xfhx/5/

Alsol, it would be nice to see if anyone has noticed this behavior before. It appears that IE11 handles nested relative positioning differently than other browsers. Is there a spec somewhere that defines what the standard should be? Should relative positioning be inherited like IE does it? Or should relative positioning always be relative to the parent? I would think the latter. But performance considerations must also be taken.

Alsol，如果有人注意过这种行为，那就太好了。看来IE11处理嵌套相对定位的方式与其他浏览器不同。是否有一个规范定义了标准应该是什么?相对定位应该像IE那样继承吗?还是相对定位总是相对于父母?我认为是后者。但是，还必须考虑性能。

#2

You should try below code sample with reference of jquery.floatThead.js.

您应该尝试使用jquery.floatThead.js下面的代码示例。

                    var $demoTable = $("div.table-responsive table");
                    $demoTable.floatThead({
                        top: 200,
                        scrollContainer: function ($table) {                                
                            return $table.closest('.table-responsive');
                        },
                        position: 'absolute'
                    });

you need to get the reference of jquery.floatThead.js file and try to apply this on table.

您需要获得jquery.floatThead的引用。js文件并尝试将其应用到表中。

You can check this working on below link. http://mkoryak.github.io/floatThead/

您可以在下面的链接中检查这个工作。http://mkoryak.github.io/floatThead/

#3

Generally for frozen rows & columns, I always prefer to use a css-only solution for best browser-compatibility.

通常对于冻结的行和列，我总是喜欢使用仅css的解决方案来实现最好的浏览器兼容性。

I have tried to replicate your code here with a css-only solution.

我已经尝试用仅css的解决方案在这里复制您的代码。

I am working on a mac, so don't have access to IE. Please verify if its working fine on the same.

我正在开发mac，所以不能访问IE。请确认它在同样的情况下是否正常工作。

Updated fiddle: https://jsfiddle.net/nashcheez/bzuasLcz/81/

更新小提琴:https://jsfiddle.net/nashcheez/bzuasLcz/81/

Refer code:

参考代码:

table {
  position: relative;
  width: 700px;
  background-color: #aaa;
  overflow: hidden;
  border-collapse: collapse;
}
/*thead*/

thead {
  position: relative;
  display: block;
  /*seperates the header from the body allowing it to be positioned*/
  width: 700px;
  overflow: visible;
}
thead th {
  background-color: #99a;
  min-width: 120px;
  height: 36px;
  min-height: 36px;
  border: 1px solid #222;
}
thead th:nth-child(1) {
  /*first cell in the header*/
  position: relative;
  display: block;
  background-color: #88b;
}
tbody tr td:nth-child(2) {
  margin-left: 124px;
  display: block;
}
/*tbody*/

tbody {
  display: block;
  width: 700px;
  height: 239px;
  overflow-y: auto;
}
tbody td {
  background-color: #bbc;
  min-width: 120px;
  border: 1px solid #222;
  height: 36px;
  min-height: 36px;
}
tbody tr td:nth-child(1) {
  /*the first cell in each tr*/
  position: absolute;
  display: inline-block;
  background-color: #99a;
}

<body>
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Town</th>
        <th>County</th>
        <th>Age</th>
        <th>Profession</th>
        <th>Anual Income</th>
        <th>Matital Status</th>
        <th>Children</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John Smith</td>
        <td>Macelsfield</td>
        <td>Cheshire</td>
        <td>52</td>
        <td>Brewer</td>
        <td>£47,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Jenny Jones</td>
        <td>Threlkeld</td>
        <td>Cumbria</td>
        <td>34</td>
        <td>Shepherdess</td>
        <td>£28,000</td>
        <td>Single</td>
        <td>0</td>
      </tr>
      <tr>
        <td>Peter Frampton</td>
        <td>Avebury</td>
        <td>Wiltshire</td>
        <td>57</td>
        <td>Musician</td>
        <td>£124,000</td>
        <td>Married</td>
        <td>4</td>
      </tr>
      <tr>
        <td>Simon King</td>
        <td>Malvern</td>
        <td>Worchestershire</td>
        <td>48</td>
        <td>Naturalist</td>
        <td>£65,000</td>
        <td>Married</td>
        <td>2</td>
      </tr>
      <tr>
        <td>Lucy Diamond</td>
        <td>St Albans</td>
        <td>Hertfordshire</td>
        <td>67</td>
        <td>Pharmasist</td>
        <td>Retired</td>
        <td>Married</td>
        <td>3</td>
      </tr>
      <tr>
        <td>Austin Stevenson</td>
        <td>Edinburgh</td>
        <td>Lothian</td>
        <td>36</td>
        <td>Vigilante</td>
        <td>£86,000</td>
        <td>Single</td>
        <td>Unknown</td>
      </tr>
      <tr>
        <td>Wilma Rubble</td>
        <td>Bedford</td>
        <td>Bedfordshire</td>
        <td>43</td>
        <td>Housewife</td>
        <td>N/A</td>
        <td>Married</td>
        <td>1</td>
      </tr>
      <tr>
        <td>Kat Dibble</td>
        <td>Manhattan</td>
        <td>New York</td>
        <td>55</td>
        <td>Policewoman</td>
        <td>$36,000</td>
        <td>Single</td>
        <td>1</td>
      </tr>
      <tr>
        <td>Henry Bolingbroke</td>
        <td>Bolingbroke</td>
        <td>Lincolnshire</td>
        <td>45</td>
        <td>Landowner</td>
        <td>Lots</td>
        <td>Married</td>
        <td>6</td>
      </tr>
      <tr>
        <td>Alan Brisingamen</td>
        <td>Alderley</td>
        <td>Cheshire</td>
        <td>352</td>
        <td>Arcanist</td>
        <td>A pile of gems</td>
        <td>Single</td>
        <td>0</td>
      </tr>
    </tbody>
  </table>
</body>

#4

The problem is that IE does not allow one to adjust the left attribute of a cell in a row independent from the row as a whole. We can see this by editing the DOM directly using the developer window in IE and the developer window in Chrome.

问题是IE不允许将一行中的单元格的左属性作为一个整体来调整。我们可以通过在IE中直接使用developer窗口和Chrome中的developer窗口编辑DOM来看到这一点。

In Chrome, when you scroll left and right, you can see in the Element viewer that the left attribute is changed on the element itself, which overrides all CSS. We can reload the page and set the element attribute manually in this same screen: style:'left:300px', and we will see the header cell move to the right 300px and hover over the remaining header cells. This is good behavior and the behavior that makes this method work.

在Chrome中，当你向左或向右滚动时，你可以在元素查看器中看到，左侧属性在元素本身上发生了改变，它覆盖了所有的CSS。我们可以重新加载页面，并在相同的屏幕上手动设置元素属性:style:'left:300px'，我们将看到标题单元格向右移动300px，并将鼠标悬停在其余的标题单元格上。这是良好的行为，也是使这种方法有效的行为。

If we do the same thing in IE and add style: 'left:300px' to the th element, we will see that the cell does not move. Nothing we do to the style attributes of that cell will cause it to leave its place in the table. It is this 'feature' of IE that is causing the method to fail. IE is insisting on maintaining cell order no matter what attributes are applied to the elements within a row.

如果我们在IE中做同样的事情并在第一个元素中添加样式:'left:300px'，我们将看到单元格不会移动。我们对该单元格的样式属性所做的任何操作都不会导致它在表中离开它的位置。正是IE的这种“特性”导致了这种方法的失败。IE坚持保持单元格的顺序，无论对行中的元素应用什么属性。

The trick is to work around this complication in a way that makes all browsers happy. There are many ways to do this, but I would probably use two tables, and use DIVs to position them so that the edges match. I would add javascript so that if one tbody scrolls up or down that it affects the other tbody in the same manner. If it scrolls right or left, nothing happens to the first table, which holds your frozen column headers, and the right table moves in the scroll direction as planned.

关键是要以一种让所有浏览器都满意的方式来解决这个复杂问题。有很多方法可以做到这一点，但是我可能会使用两个表，并使用div来定位它们，以便边缘匹配。我将添加javascript，以便如果一个tbody向上或向下滚动，它会以同样的方式影响另一个tbody。如果它向右或向左滚动，那么第一个表就不会发生任何变化，第一个表保存冻结的列标题，而右表按照计划向滚动方向移动。

By using two tables, IE no longer associates the header that you are trying to freeze with the header that is moving. Careful CSS will disguise your hack and make the table appear as one table.

通过使用两个表，(不再将您试图冻结的页眉与正在移动的页眉关联起来)。仔细的CSS将隐藏您的黑客，使表显示为一个表。

Good luck and happy coding!

祝您好运和快乐的编码!

#1