html - 在不使用 javascript/jquery 的情况下在运行时动态计算 css 对齐

Question

您好，我有一个动态表生成。所以宽度不同。现在我必须使我的前 2 列成为粘性的，这可以通过 css nth-child 来完成。 overflow 时出现问题是scroll他们开始相互重叠。为了解决这个问题，我必须计算 left第一列，然后从表的 100% 中减去，以便它可以与第一列对齐。 CSS calc()可以在这里再次使用。我无法计算 left第一列的第一位。

这是我的 CSS

td:nth-child(1) {
    left: 0;
    position: sticky;
    z-index: 9999;
    background-color: #fafafa;
    border-right: 1px solid silver;
}

td:nth-child(2) {
    left: 300px;
    position: sticky;
    z-index: 99;
    background-color: #fafafa;
    border-right: 1px solid silver;
}

th:nth-child(1) {
    left: 0;
    position: sticky;
    z-index: 9999;
}

th:nth-child(2) {
    left: 300px;
    position: sticky;
    z-index: 99;
}

这是我的 fiddle

https://jsfiddle.net/toxicLamba/pjresLw3/27/

现在为了在我更改 width 时重现问题至 300%它坏了(目前只有这样才能让它重现) <table width="200%" style="overflow:scroll">

这个可以用纯css解决吗

任何帮助将不胜感激。

更新

$('table tr').each(function() {
  $('table tr').find('td:lt(2)').css('position', 'sticky').css('background', '#fafafa').css('left', '0');
})

工作正常，因为它正在工作，但第二列与第一列重叠，因为两者具有相同的 z-index以及导航到下一页时。它停止工作，jquery on(load/ready/change)不处理动态内容

Answer 1

老实说，写 CSS 属性 left: 300px 这不是一个好主意，你可能在 CSS 中有一个解决方法，但你也应该关注 CSS 属性的硬编码值，所以最好使用 jquery 来计算 left，这将是动态