Javascript 使表中的前两列保持粘性

我需要在一个表中设置前两列，每个表有n个动态宽度的列

我试过下面的CSS

td:nth-child(1), td:nth-child(2){
   position:sticky;
   left:0px;
}

然后我通过计算第一列的宽度设置了JS中第二列的左侧位置

var width = $("table tr > td:nth-child(1)").outerWidth();
$("table.matrix_class tr > td:nth-child(2)").css('left', width);

现在我需要用CSS而不是JS来做所有的事情。我如何在纯CSS中做到这一点

---

另外，当第一列宽度为动态时，如何执行此操作？

您可以使用此css执行粘性标题

现场工作演示： [示范][1]

<div class="zui-wrapper">
<div class="zui-scroller">
    <table class="zui-table">
        <thead>
            <tr>
                <th class="zui-sticky-col">Name</th>
                <th class="zui-sticky-col2">Number</th>
                <th>Position</th>
                <th>Height</th>
                <th>Born</th>
                <th>Salary</th>
                <th>Prior to NBA/Country</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="zui-sticky-col">DeMarcus Cousins</td>
                <td class="zui-sticky-col2">15</td>
                <td>C</td>
                <td>6'11"</td>
                <td>08-13-1990</td>
                <td>$4,917,000</td>
                <td>Kentucky/USA</td>
            </tr>
            <tr>
                <td class="zui-sticky-col">Isaiah Thomas</td>
                <td class="zui-sticky-col2">22</td>
                <td>PG</td>
                <td>5'9"</td>
                <td>02-07-1989</td>
                <td>$473,604</td>
                <td>Washington/USA</td>
            </tr>
            <tr>
                <td class="zui-sticky-col">Ben McLemore</td>
                <td class="zui-sticky-col2">16</td>
                <td>SG</td>
                <td>6'5"</td>
                <td>02-11-1993</td>
                <td>$2,895,960</td>
                <td>Kansas/USA</td>
            </tr>
            <tr>
                <td class="zui-sticky-col">Marcus Thornton</td>
                <td class="zui-sticky-col2">23</td>
                <td>SG</td>
                <td>6'4"</td>
                <td>05-05-1987</td>
                <td>$7,000,000</td>
                <td>Louisiana State/USA</td>
            </tr>
            <tr>
                <td class="zui-sticky-col">Jason Thompson</td>
                <td class="zui-sticky-col2">34</td>
                <td>PF</td>
                <td>6'11"</td>
                <td>06-21-1986</td>
                <td>$3,001,000</td>
                <td>Rider/USA</td>
            </tr>
        </tbody>
    </table>
</div>

名称
数
位置
高度
天生的
薪水
NBA/国家队之前
德马库斯-考辛斯
15
C
6'11"
08-13-1990
$4,917,000
肯塔基州/美国
伊赛亚-托马斯
22
PG
5'9"
02-07-1989
$473,604
华盛顿/美国
麦克勒摩
16
SG
6'5"
02-11-1993
$2,895,960
堪萨斯州/美国
马库斯-索顿
23
SG
6'4"
05-05-1987
$7,000,000
路易斯安那州/美国
杰森-汤普森
34
PF
6'11"
06-21-1986
$3,001,000
骑手/美国

---

你能用你的完整代码制作codepen，jsbin吗？第一列是动态宽度，在这种情况下，你如何将左位置设置为第二列的静态值（演示中左：140px）是的，同样的问题，如果你的第一列没有固定的宽度，你将如何设置第二列的宽度？你不能使用纯CSS来实现这一点，你需要使用Javascript来检索offsetWidth，并用该值设置同级的left属性。如果你设置position:absolute，那么垂直滚动是不可能的