当用户在 X 轴上滚动时,我目前正在尝试修复表格中的第一列。我正在使用这种结构:
<div class="table-wrapper">
<table id="consumption-data" class="data">
<thead class="header">
<tr>
<th>Month</th>
<th>Item 1</th>
</tr>
</thead>
<tbody class="results">
<tr>
<th>Jan</th>
<td>3163</td>
</tr>
<tr>
<th>Feb</th>
<td>3163.7</td>
</tr>
<tr>
<th>Mar</th>
<td>3163.7</td>
</tr>
<tr>
<th>Apr</th>
<td>3163.7</td>
</tr>
<tr>
<th>May</th>
<td>3163.7</td>
</tr>
<tr>
<th>Jun</th>
<td>3163.7</td>
</tr>
<tr>
<th>...</th>
<td>...</td>
</tr>
</tbody>
</table>
</div>
项目的数量将由用户选择,即表中可能有 90 个项目。这将需要在 X 轴上滚动。我得到的问题是:
如何修复th
标签在tbody
(和)内th:first-child
的位置thead
?
我一直在查看其他一些线程,但是它们并没有真正解释我是如何实现固定列的,这使我很难理解代码的作用以及我应该做什么。
我还检查了人们在另一个表中拆分标题列的解决方案。这对我来说是不可能的,因为我稍后会将数据导出到其他系统。
我的CSS:
.table-wrapper {
overflow-x:scroll;
overflow-y:visible;
}
这修复了滚动,现在可以使用:
tbody th,
thead th:first-child {}
有人有什么想法吗?
编辑:这是一个 jsFiddle:https ://jsfiddle.net/DJqPf/5/