如何使用现代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技术实现同样效果的方法。