放置粘性的位置，使表格行相互粘在一起

Question

你好，我正在尝试制作一个带有列的表，当我水平滚动时，这些列可以相互粘贴。我使用的是position stick，它能正确地处理第一列，当添加第二列或第三列时，问题就开始了。尤其是其他列的宽度总是不同，这让我无法使用相同的宽度乘以列数。

我能在不知道它们的宽度的情况下让它们粘在一起吗？有没有可能让文本出现在另一个文本的顶部，而不会相互碰撞，造成无法阅读的混乱？

.sticky-col {
position: sticky !important;
z-index: 1000;
top: 0;
align-self: flex-start;
left: 0;
}

<table style="width:2000px" border="1">
<tr>
<th class="sticky-col">Firstname</th>
<th class="sticky-to-left-elem">Lastname</th>
<th>Age</th>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td class="sticky-col">Jill</td>
<td class="sticky-to-left-elem">Smith</td>
<td>50</td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td class="sticky-col">Eve</td>
<td class="sticky-to-left-elem">Jackson</td>
<td>94</td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td class="sticky-col">Eve</td>
<td class="sticky-to-left-elem">Jackson</td>
<td>94</td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td class="sticky-col">Eve</td>
<td class="sticky-to-left-elem">Jackson</td>
<td>94</td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Js小提琴https://jsfiddle.net/e0xc69dg/

Answer 1

您有一个良好的开端，您可以将您的风格应用于所有td和tr

td,
th {
position: sticky;
top: 0;
align-self: flex-start;
left: 0;
background-color: #fff;
}

<table style="width:2000px" border="1">
<tr>
<th class="sticky-col">Firstname</th>
<th class="sticky-to-left-elem">Lastname</th>
<th>Age</th>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td class="sticky-col">Jill</td>
<td class="sticky-to-left-elem">Smith</td>
<td>50</td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td class="sticky-col">Eve</td>
<td class="sticky-to-left-elem">Jackson</td>
<td>94</td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td class="sticky-col">Eve</td>
<td class="sticky-to-left-elem">Jackson</td>
<td>94</td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td class="sticky-col">Eve</td>
<td class="sticky-to-left-elem">Jackson</td>
<td>94</td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Answer 2

更改第二列和第三列的left属性。在你的例子中尝试100px，然后我会从左边粘贴100px。

您还需要稍微调整一些背景颜色，也许还需要调整一些表格标题的文本对齐方式。