Javascript &引用；粘的；具有水平滚动的表格上的标题。。。完全不可能？

在研究了几个小时后，我开始认为这是不可能的，即使是在最新的浏览器上：

HTML

table

元素，带有水平滚动条，顶部带有“sticky”

thead

，作为垂直滚动的周围网页的一部分

以下是我的尝试：

#a{
高度：100px；
背景颜色：绿色；
}
身体{
宽度：100%；
}
#包装纸{
溢出-x：滚动；
宽度：100%；
}
th{
位置：粘性；
排名：0；
背景色：红色；
z指数：1；
}
运输署{
空白：nowrap；
}
#b{
高度：2000px；
背景颜色：蓝色；
}

一些内容
粘头
粘头
粘头
长内容长内容长内容长内容长内容长内容
长内容长内容长内容长内容长内容长内容
长内容长内容长内容长内容长内容长内容
1.
2.
3.
1.
2.
3.
1.
2.
3.
1.
2.
3.
1.
2.
3.
更多内容

这不完全是您要求的，但请尝试篡改此表：

var tee=$（'.gridtable thead'）；
var tw=document.getElementsByClassName（'tabWrap'）[0]；
var cloner=document.getElementsByClassName（'tabWrap'）[0]；
var bd=document.getElementsByClassName（'container'）[0]；
var newTableWrap=document.createElement（“div”）；
var newTable=document.createElement（“表”）；
var oldTable=document.getElementsByClassName（'gridtable'）[0]；
var childNode=oldTable.childNodes[1]；
var wrapW=$（tw.css（'width'）；
var wrapY=$（tw.css（'height'）；
var头高=T.css（“高度”）；
//节点要克隆的节点。
var dupNode=childNode.cloneNode（true）；
newTable.appendChild（dupNode）；
newTableWrap.appendChild（newTable）；
newTable.classList.add（“gridtableT”）；
newTable.classList.add（“gridtable”）；
$（newTableWrap.css（{'width'：wrapW'overflow'：'hidden'}）；
bd.insertBefore（newTableWrap，tw）；
$（oldTable.css（'margin-top'，（'-'+人头高））；
$（'tr td'）.filter（“：最后一个子项”）
.css（'border-right-color'，'transparent'）；
$（'tr:last td'）.css（'border-bottom-color'，'transparent'）；
$（tw）.on（'scroll'，函数（e）{
var newLeft=e.target.scrollLeft；
$（newTable）.css（'margin-left'，'-'+newLeft+'px'）；
});
表{边框折叠：折叠；}
th，td{
左边框颜色：透明！重要；
}
.最后一个单元{
边框右颜色：透明！重要；
}
.集装箱{
外形：1px纯黑；
轮廓偏移量：0px；
宽度：800px；
}
塔布瑞普先生{
高度：500px；
右边距：30px；
页边距底部：0；
溢出：滚动；
宽度：800px；
}
.网格表{
颜色：#333333；
字体系列：verdana、arial、无衬线字体；
字体大小：11px；
}
.gridtable th{
边框宽度：1px；
边框样式：实心；
边框颜色：#666666；
背景色：#dedede；
填充：8px；
}
.gridtable td{
边框宽度：1px；
填充：8px；
边框样式：实心；
边框颜色：#666666；
背景色：#ffffff；
}
.gridtableT{颜色：红色；}
.gridtableT th{边框顶部颜色：透明；}
.拉斯特罗运输署{
背景色：浅青色；
}
塔布瑞斯分区{
边框底色：透明！重要；
边框顶部颜色：透明！重要；
}

头一
头二
头三
头四
头五
头六
总目七
头八
头九
头十
总目十一
总目12
总目十三
总目十四
总目十五
头十六
总目十七
头十八
头十九
头二十
数据一
数据二
数据三四下潜
数据四
数据五
数据六
数据七
数据八
数据九
数据十
数据11
数据12
数据十三
数据14
数据15
数据十六
数据17
数据18
数据十九
数据二十
数据一
数据二
数据三
数据四
数据五
数据六
数据七
数据八
数据九
数据十
数据11
数据12
数据十三
数据14
数据15
数据十六
数据17
数据18
数据十九
数据二十
数据一
数据二
数据三
数据四
数据五
数据六
数据七
数据八
数据九
数据十
数据11
数据12
数据十三
数据14
数据15
数据十六
数据17
数据18
数据十九
数据二十
数据一
数据二
数据三
数据四
数据五
数据六
数据七
数据八
数据九
数据十
数据11
数据12
数据十三
数据14
数据15
数据十六
数据17
数据18
数据十九
数据二十
数据一
数据二
数据三
数据四
数据五
数据六
数据七
数据八
数据九
数据十
数据11
数据12
数据十三
数据14
数据15
数据十六
数据17
数据18
数据十九
Da
#wrapper {
  height: 30vh;
  overflow-x: scroll;
  width: 100%;
}

$("table").floatThead({
position:"absolute"
});

<div id="a">
  some content
</div>

<div id="wrapper">
  <table id="test">
    <thead id="sticky">
      <tr id="headerRow">
        <th>sticky header</th>
        <th>sticky header</th>
        <th>sticky header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>long content long content long content long content long content long content</td>
        <td>long content long content long content long content long content long content</td>
        <td>long content long content long content long content long content long content</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="b">
  some more content
</div>

// When the user scrolls the page, execute addSticky 
window.onscroll = function() {addSticky()};
document.getElementById("wrapper").onscroll = function(){addSticky()};

// Get the header
var header = document.getElementById("sticky");

// Get the offset position
var sticky = header.offsetTop;

// Get bottom offset
var bottomOffset = document.getElementById("test").offsetHeight+100;


// Set the width of the row and columns by placing them in an array and looping said array
var headerRow = document.getElementById("headerRow");
header.style.width = headerRow.offsetWidth+"px";
var headerKids = headerRow.children;
for (var i=0; i<headerKids.length; i++){
  headerKids[i].style.width=headerKids[i].offsetWidth+"px";
}

// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function addSticky() {
  if (this.scrollY > 100 && this.scrollY < bottomOffset ) {
    xScroll = document.getElementById("wrapper").scrollLeft;
    header.classList.add("sticky");
    header.style.left = "-"+xScroll+"px";
  } else {
    header.classList.remove("sticky");
  }
}

.sticky {
  position: fixed;
  top: 0;
  height: 20px;
}