如何使用现代CSS尽可能少的JavaScript制作表格？
我试图拥有以下功能：
- 固定列（位置和宽度） - 在X和Y轴上可滚动 - X轴响应式（对于非固定宽度列）。
我试图拥有以下功能：
- 固定列（位置和宽度） - 在X和Y轴上可滚动 - X轴响应式（对于非固定宽度列）。
注意: 我看到并分析了一些最流行/最常见的SO问题和答案，例如here和here。
我知道可以使用JavaScript事件处理程序来滚动，以便将固定列向下/向上移动以跟随主列。我试图构建的功能的示例（但是脚本非常重）could be like this。我们还可以在表格的父元素中添加MutationObserver来检测大小更改并再次计算表格的大小。但这会影响性能，由于CSS也在不断发展和现代化，我想知道是否有新方法...
是否有2017/2018年的解决方案只使用CSS或尽可能少的JS开销？
我希望避免实施易于破坏的JavaScript解决方案，如下所示：
我的想法：
a)：在固定列中使用position: fixed;
问题：
<td>元素的高度必须由JavaScript定义或计算。- 需要一个滚动事件监听器，并且需要编程滚动固定列
b)：使用
来“伪造”左侧列，并在表格中具有可滚动的内容
使用滚动事件监听器和一个固定的左侧列，我们可以使用如下JavaScript代码：
关于可能的重复建议：
我的问题中提到了可能的重复，但它并没有我要找的内容。那个问题只是要求“只冻结左侧一列” - 而这个问题的范围更广，涉及固定标题、固定列和可滚动的正文。
另一个问题和被接受的答案都来自2009年！我认为这个话题，以及我的具体范围和示例值得重新讨论。另外：我的“JS解决方案”只是JS如何失效的一个示例，我正在寻找用现代CSS技术实现同样效果的方法。
问题：
- div的高度必须与表格行的高度同步
- HTML语义丢失，因为固定的“伪”列不再是表格语法
c)：使用N个表格仅显示每个表格的一部分，以便保留HTML标记但保持固定的标题/列。
问题：
- 重复的HTML x N
- 还必须使用JavaScript同步大小和滚动
使用滚动事件监听器和一个固定的左侧列，我们可以使用如下JavaScript代码：
const firstColumn = [...document.querySelectorAll('table tr > *:first-of-type')];
const tableContainer = document.querySelector('.table-container');
tableContainer.addEventListener('scroll', function() {
const currentScrollPosition = this.scrollTop * -1;
firstColumn.forEach(el => el.style.marginTop = currentScrollPosition + 'px');
});.table-container {
width: 600px;
height: 300px;
overflow-x: scroll;
overflow-y: scroll;
}
.table-scroller {
width: 1000px;
}
table {
width: 100%;
margin-left: -13px;
table-layout: fixed;
border-collapse: collapse;
border: none;
}
table th,
table td {
padding: 0.8em;
border: 1px solid;
background-color: #eeeeef;
}
table th {
background-color: #6699FF;
font-weight: bold;
}
table tr {
height: 60px;
vertical-align: middle;
}
table tr > *:first-of-type {
position: fixed;
width: 50px;
margin-left: 13px;
margin-top: 0;
height: inherit;
}<div class="table-container">
<div class="table-scroller">
<table>
<tbody>
<tr>
<td>Edrward 0</td>
<td>32</td>
<td>London Park no. 0</td>
<td>London Park no. 0</td>
<td>London Park no. 0</td>
<td>London Park no. 0</td>
<td>London Park no. 0</td>
<td>London Park no. 0</td>
<td>London Park no. 0</td>
<td>London Park no. 0</td>
<td><a href="#">action</a></td>
</tr>
<tr>
<td>Edrward 1</td>
<td>32</td>
<td>London Park no. 1</td>
<td>London Park no. 1</td>
<td>London Park no. 1</td>
<td>London Park no. 1</td>
<td>London Park no. 1</td>
<td>London Park no. 1</td>
<td>London Park no. 1</td>
<td>London Park no. 1</td>
<td><a href="#">action</a></td>
</tr>
<tr>
<td>Edrward 2</td>
<td>32</td>
<td>London Park no. 2</td>
<td>London Park no. 2</td>
<td>London Park no. 2</td>
<td>London Park no. 2</td>
<td>London Park no. 2</td>
<td>London Park no. 2</td>
<td>London Park no. 2</td>
<td>London Park no. 2</td>
<td><a href="#">action</a></td>
</tr>
<tr>
<td>Edrward 3</td>
<td>32</td>
<td>London Park no. 3</td>
<td>London Park no. 3</td>
<td>London Park no. 3</td>
<td>London Park no. 3</td>
<td>London Park no. 3</td>
<td>London Park no. 3</td>
<td>London Park no. 3</td>
<td>London Park no. 3</td>
<td><a href="#">action</a></td>
</tr>
<tr>
<td>Edrward 4</td>
<td>32</td>
<td>London Park no. 4</td>
<td>London Park no. 4</td>
<td>London Park no. 4</td>
<td>London Park no. 4</td>
<td>London Park no. 4</td>
<td>London Park no. 4</td>
<td>London Park no. 4</td>
<td>London Park no. 4</td>
<td><a href="#">action</a></td>
</tr>
<tr>
<td>Edrward 5</td>
<td>32</td>
<td>London Park no. 5</td>
<td>London Park no. 5</td>
<td>London Park no. 5</td>
<td>London Park no. 5</td>
<td>London Park no. 5</td>
<td>London Park no. 5</td>
<td>London Park no. 5</td>
<td>London Park no. 5</td>
<td><a href="#">action</a></td>
</tr>
<tr>
<td>Edrward 6</td>
<td>32</td>
<td>London Park no. 6</td>
<td>London Park no. 6</td>
<td>London Park no. 6</td>
<td>London Park no. 6</td>
<td>London Park no. 6</td>
<td>London Park no. 6</td>
<td>London Park no. 6</td>
<td>London Park no. 6</td>
<td><a href="#">action</a></td>
</tr>
<tr>
<td>Edrward 7</td>
<td>32</td>
<td>London Park no. 7</td>
<td>London Park no. 7</td>
<td>London Park no. 7</td>
<td>London Park no. 7</td>
<td>London Park no. 7</td>
<td>London Park no. 7</td>
<td>London Park no. 7</td>
<td>London Park no. 7</td>
<td><a href="#">action</a></td>
</tr>
<tr>
<td>Edrward 8</td>
<td>32</td>
<td>London Park no. 8</td>
<td>London Park no. 8</td>
<td>London Park no. 8</td>
<td>London Park no. 8</td>
<td>London Park no. 8</td>
<td>London Park no. 8</td>
<td>London Park no. 8</td>
<td>London Park no. 8</td>
<td><a href="#">action</a></td>
</tr>
<tr>
<td>Edrward 9</td>
<td>32</td>
<td>London Park no. 9</td>
<td>London Park no. 9</td>
<td>London Park no. 9</td>
<td>London Park no. 9</td>
<td>London Park no. 9</td>
<td>London Park no. 9</td>
<td>London Park no. 9</td>
<td>London Park no. 9</td>
<td><a href="#">action</a></td>
</tr>
</tbody>
</table>
</div>
</div>但是我能不用JavaScript实现这个吗？
关于可能的重复建议：
我的问题中提到了可能的重复，但它并没有我要找的内容。那个问题只是要求“只冻结左侧一列” - 而这个问题的范围更广，涉及固定标题、固定列和可滚动的正文。
另一个问题和被接受的答案都来自2009年！我认为这个话题，以及我的具体范围和示例值得重新讨论。另外：我的“JS解决方案”只是JS如何失效的一个示例，我正在寻找用现代CSS技术实现同样效果的方法。