如何使表格的第一列和第二列变粘 [英] How can I make the first and second column of a table sticky

问题描述

我有 div 带有属性

<div id="_body_container" style="height: 500px; overflow-x: auto; overflow-y: auto; ">
</div>`

在这个div里面我有 table 其中包含类 views-table ，此表的宽度为100％，这使得它成为父div： _body_container scrollable.I想要修复此表的第一列和第二列粘贴在他们的位置，而左右滚动事件发生在 _body_container

inside this div i have the table which has class views-table, this table has 100% width which makes it's parent div:_body_container scrollable.I want to fix the first and the second column of this table sticky at their positions while the left and right scroll event happen for _body_container

结构如下：

推荐答案

假设每个部分都是< td> 元素......

Assuming each section is a <td> element...

CSS

table {
    position: relative;
    padding-left: (width-of-your-td-elements);
}
table td:first-of-type {
    position: absolute;
    left: 0;
}

尝试一下。已经很晚了，我喝醉了，所以我对此并不完全确定。哦，请记住这是使用CSS3，< = IE8不支持。

Try that out. It's late and I'm drunk, so I'm not entirely sure on this. Oh, and keep in mind this is using CSS3, which isn't supported in <= IE8.

如果这样可行，你可以添加位置：绝对; left：0; 到 class 并以此方式定位第一个元素。

If this works, you could just add position:absolute; left:0; to a class and target the first element that way.

这篇关于如何使表格的第一列和第二列变粘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！