Javascript 带有固定列和标题的可滚动表格，带有现代CSS

如何使用现代CSS用尽可能少的JavaScript创建一个表

我正在尝试的功能是：

• 固定柱（位置和宽度）
• 可在X轴和Y轴上滚动
• 在X轴上响应（对于非固定宽度列）

注意：我确实看到并分析了SO中一些最流行/最常见的问题和答案，例如和

我知道这可以通过scroll的JavaScript事件处理程序来完成，这样固定的列就可以向下/向上移动以跟随主列。我正在尝试构建的功能的一个示例（但脚本编写得很重）。我们还可以将父元素添加到表中，以检测大小更改并再次计算表的大小。但这在性能上是昂贵的，而且由于CSS也在发展和现代化，我想知道是否有新的方法

2017/2018年是否有一个只使用CSS或尽可能少的JS开销的解决方案

我希望避免实现像这样容易中断的JavaScript解决方案：

我的想法是：

a）

：使用

位置：固定在固定列中

问题：


元素高度必须由JavaScript定义或计算
需要一个滚动事件监听器，我们需要以编程方式滚动固定列

b）：使用div“伪造”左列，并在表中显示可滚动内容

问题：


div高度必须与表行高度同步
HTML语义丢失，因为修复了“假”列不再是表语法

c）：use N表格只显示每个表格的一部分，这样我可以有HTML标记，但保留固定的标题/列

问题：


重复HTML x N
还必须使用JavaScript同步大小和滚动


使用滚动事件侦听器和固定的左列，我们可以使用如下JavaScript：


const firstColumn=[…document.queryselectoral（'table tr>*：类型的第一个'）；
const tableContainer=document.querySelector（'.table container'）；
tableContainer.addEventListener（'scroll'，function（）{
const currentScrollPosition=this.scrollTop*-1；
firstColumn.forEach（el=>el.style.marginTop=currentScrollPosition+'px'）；
});
.table容器{
宽度：600px；
高度：300px；
溢出-x：滚动；
溢出y：滚动；
}
.表格滚动条{
宽度：1000px；
}
桌子{
宽度：100%；
左边距：-13px；
表布局：固定；
边界塌陷：塌陷；
边界：无；
}
表th，
表td{
填充：0.8em；
边框：1px实心；
背景色：#EEEEE F；
}
表th{
背景色：#6699FF；
字体大小：粗体；
}
表tr{
高度：60px；
垂直对齐：中间对齐；
}
表tr>*：第一种类型{
位置：固定；
宽度：50px；
左边距：13px；
边际上限：0；
身高：继承；
}

艾德沃德0
32
伦敦公园0号
伦敦公园0号
伦敦公园0号
伦敦公园0号
伦敦公园0号
伦敦公园0号
伦敦公园0号
伦敦公园0号
艾德沃德1
32
伦敦公园一号
伦敦公园一号
伦敦公园一号
伦敦公园一号
伦敦公园一号
伦敦公园一号
伦敦公园一号
伦敦公园一号
艾德沃德2
32
伦敦公园2号
伦敦公园2号
伦敦公园2号
伦敦公园2号
伦敦公园2号
伦敦公园2号
伦敦公园2号
伦敦公园2号
艾德沃德3
32
伦敦公园3号
伦敦公园3号
伦敦公园3号
伦敦公园3号
伦敦公园3号
伦敦公园3号
伦敦公园3号
伦敦公园3号
艾德沃德4
32
伦敦公园4号
伦敦公园4号
伦敦公园4号
伦敦公园4号
伦敦公园4号
伦敦公园4号
伦敦公园4号
伦敦公园4号
艾德沃德5
32
伦敦公园5号
伦敦公园5号
伦敦公园5号
伦敦公园5号
伦敦公园5号
伦敦公园5号
伦敦公园5号
伦敦公园5号
艾德沃德6
32
伦敦公园6号
伦敦公园6号
伦敦公园6号
伦敦公园6号
伦敦公园6号
伦敦公园6号
伦敦公园6号
伦敦公园