Javascript 具有固定（冻结）列和标题的HTML表

我一直在网上搜索如何制作一个包含固定（冻结）列和标题的表。 看来我终于找到了解决方案，并根据自己的需要进行了修改

原来的小提琴在那儿

这是我修改过的解决方案。我在Chrome（版本：55.0.2883.87 m）和Firefox（版本：51.0.1）中测试了它

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

下面是一些演示该方法的代码：

$（文档）.ready（函数（）{
$（'tbody'）.scroll（函数（e）{//检测tbody上的滚动事件
/*
将thead left值设置为tbody.scrollLeft的负值将使其跟踪移动
将elements left值设置为tbody.scrollLeft的值将使其保持在表左侧的相对位置。
*/
$（'thead'）.css（“left”，-$（'tbody”）.scrollLeft（）；//修复与正文滚动相关的thead
$（'thead th:nth child（1）'）.css（“left”，$（'tbody”）.scrollLeft（）；//修复头的第一个单元格
$（'tbody td:nth child（1）'）.css（“left”，$（'tbody”）.scrollLeft（）；//修复tdbody的第一列
});
});
.container{
高度：200px；
宽度：400px；
溢出：隐藏；
}
桌子{
位置：相对位置；
背景色：#aaa；
边界塌陷：塌陷；
表布局：固定；
显示器：flex；
弯曲方向：立柱；
身高：100%；
宽度：100%；
}
/*泰德*/
泰德{
位置：相对位置；
display:block；/*将收割台与主体分开，以便对其进行定位*/
}
thead th{
背景色：#99a；
最小宽度：120px；
边框：1px实心#222；
}
thead th:n个子（1）{/*头中的第一个单元格*/
位置：相对位置；
背景色：#88b；
}
/*t车身*/
t车身{
弹性：1；
位置：相对位置；
显示：block；/*将tbody与页眉分开*/
溢出：自动；
}
tbody td{
背景色：#英国广播公司；
最小宽度：120px；
边框：1px实心#222；
}
tbody tr td:n个子（1）{/*每个tr中的第一个单元格*/
位置：相对位置；
背景色：#99a；
}

名称
123
城镇
县
年龄
职业
年收入
物质状态
儿童
名称
城镇
县
年龄
123
321
职业
年收入
物质状态
儿童
约翰·史密斯
麦克斯菲尔德
柴郡
123
52
酿酒商
£47,000
已婚的
2.
詹妮·琼斯123
312
瑟雷克尔德
坎布里亚
34
牧羊女
£28,000
单身
0
彼德.福兰顿
阿维伯里
威尔特郡
57
音乐家
£124,000
已婚的
4.
西蒙·京治
马尔文
沃切斯特郡
48
博物学家
£65,000
已婚的
2.
露西·戴蒙德
圣奥尔本
赫特福德郡
67
抗药性
已退休的
已婚的
3.
奥斯汀·史蒂文森
爱丁堡
洛锡安
36
义务警员
£86,000
单身
不为人知
威尔玛碎石
贝德福德
贝德福德郡
43
家庭主妇
不适用
已婚的
1.
凯特点菜
曼哈顿
纽约
55
女警察
$36,000
单身
1.
博林布鲁克
博林布鲁克
林肯郡
45
地主
洛茨
已婚的
6.
艾伦·布里辛格曼
奥尔德利
柴郡
352
神秘主义者
一堆宝石
单身
0
这很奇怪。问题代码似乎是这一行：

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

看起来IE11处理嵌套元素相对位置的方式不同（与Chrome和其他浏览器不同）。在这种情况下，您使用带有偏移的相对定位来定位AD。您还使用偏移和相对定位来定位AD th（它的子对象）。Chrome似乎是相对于
表定位
thead
，然后相对于
thead定位
th
。另一方面，IE11似乎是相对于
表
定位
thead
，然后
th
只是继承相同的定位，而不管其自身的定位如何

解决方法如下：在IE11上，对
thead
采用不同的定位方式。在
thead
元素上设置定位，而不是在父
thead
元素上设置定位。这样，您的第一列就不会“被迫”继承
thead
（在IE中）的位置

下面是代码的完整示例，显示了基于浏览器的不同处理方式：


Alsol，如果以前有人注意到这种行为，那就太好了。IE11处理嵌套相对定位的方式似乎与其他浏览器不同。是否有一个规范来定义标准应该是什么？相对定位应该像这样继承吗
$(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
  });
});

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