我有一个以下格式的 HTML 表格:
+-------------+-------------+----------+
| Single line | Single line | Very, |
| | | very |
| | | long |
| | | text, |
| | | going |
| | | over |
| | | multiple |
| | | screen |
| | | pages |
+-------------+-------------+----------+
| Next line | ... | ... |
滚动表格时，我遇到“单行”条目看不见的问题，这使得该表格(甚至更)难以处理。
有没有办法让单行条目保持可见(当然是在单元格内)，可能使用 CSS 或简单的 JavaScript/jQuery？
至于代码，它实际上只是包含 jQuery 的页面上的 HTML 表格:
<table>
<thead>
<tr>
<th>Head</th><th>Head</th><th>Head</th>
</tr>
</thead>
<tbody>
<tr>
<td>Short</td>
<td>Short</td>
<td>Long, long, long</td>
</tr>
<tr>
<td>Short</td>
<td>Short</td>
<td>Long, long, long</td>
</tr>
</tbody>
</table>
我不是在寻找具体的解决方案，而是在寻找正确的方向。
最佳答案
是的，你可以将内容放在td中的另一个元素中，例如span，然后将其设置为position: Sticky和顶部:0;
table {
max-width: 240px;
}
table tr td{
vertical-align: top;
}
table tr td > *{
top: 0;
position: sticky;
}<table border="1">
<thead>
<th>Column 1</th>
<th>Column 2</th>
</thead>
<tbody>
<tr>
<td><span>Single Line</span></td>
<td><span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum optio corporis alias esse. Veniam facilis odio doloribus nostrum molestias architecto! Doloremque cum exercitationem aspernatur corrupti, ullam blanditiis modi. Et, ut! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum optio corporis alias esse. Veniam facilis odio doloribus nostrum molestias architecto! Doloremque cum exercitationem aspernatur corrupti, ullam blanditiis modi. Et, ut! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum optio corporis alias esse. Veniam facilis odio doloribus nostrum molestias architecto! Doloremque cum exercitationem aspernatur corrupti, ullam blanditiis modi. Et, ut! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum optio corporis alias esse. Veniam facilis odio doloribus nostrum molestias architecto! Doloremque cum exercitationem aspernatur corrupti, ullam blanditiis modi. Et, ut! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum optio corporis alias esse. Veniam facilis odio doloribus nostrum molestias architecto! Doloremque cum exercitationem aspernatur corrupti, ullam blanditiis modi. Et, ut! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum optio corporis alias esse. Veniam facilis odio doloribus nostrum molestias architecto! Doloremque cum exercitationem aspernatur corrupti, ullam blanditiis modi. Et, ut! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum optio corporis alias esse. Veniam facilis odio doloribus nostrum molestias architecto! Doloremque cum exercitationem aspernatur corrupti, ullam blanditiis modi. Et, ut! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum optio corporis alias esse. Veniam facilis odio doloribus nostrum molestias architecto! Doloremque cum exercitationem aspernatur corrupti, ullam blanditiis modi. Et, ut! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum optio corporis alias esse. Veniam facilis odio doloribus nostrum molestias architecto! Doloremque cum exercitationem aspernatur corrupti, ullam blanditiis modi. Et, ut! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum optio corporis alias esse. Veniam facilis odio doloribus nostrum molestias architecto! Doloremque cum exercitationem aspernatur corrupti, ullam blanditiis modi. Et, ut!</span></td>
</tr>
<tr>
<td><span>Another Single Line</span></td>
<td><span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum optio corporis alias esse. Veniam facilis odio doloribus nostrum molestias architecto! Doloremque cum exercitationem aspernatur corrupti, ullam blanditiis modi. Et, ut! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum optio corporis alias esse. Veniam facilis odio doloribus nostrum molestias architecto! Doloremque cum exercitationem aspernatur corrupti, ullam blanditiis modi. Et, ut! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum optio corporis alias esse. Veniam facilis odio doloribus nostrum molestias architecto! Doloremque cum exercitationem aspernatur corrupti, ullam blanditiis modi. Et, ut! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum optio corporis alias esse. Veniam facilis odio doloribus nostrum molestias architecto! Doloremque cum exercitationem aspernatur corrupti, ullam blanditiis modi. Et, ut! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum optio corporis alias esse. Veniam facilis odio doloribus nostrum molestias architecto! Doloremque cum exercitationem aspernatur corrupti, ullam blanditiis modi. Et, ut! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum optio corporis alias esse. Veniam facilis odio doloribus nostrum molestias architecto! Doloremque cum exercitationem aspernatur corrupti, ullam blanditiis modi. Et, ut! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum optio corporis alias esse. Veniam facilis odio doloribus nostrum molestias architecto! Doloremque cum exercitationem aspernatur corrupti, ullam blanditiis modi. Et, ut! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum optio corporis alias esse. Veniam facilis odio doloribus nostrum molestias architecto! Doloremque cum exercitationem aspernatur corrupti, ullam blanditiis modi. Et, ut! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum optio corporis alias esse. Veniam facilis odio doloribus nostrum molestias architecto! Doloremque cum exercitationem aspernatur corrupti, ullam blanditiis modi. Et, ut! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eum optio corporis alias esse. Veniam facilis odio doloribus nostrum molestias architecto! Doloremque cum exercitationem aspernatur corrupti, ullam blanditiis modi. Et, ut!</span></td>
</tr>
</tbody>
</table>关于javascript - 在单元格很长的表格中保持表格行内容清晰可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56251072/