CSS 移动端固定表格的第一列，其余内容超出可以滚动

这几天做项目，需要做表格，将第一列固定不动，其他的超出的内容可以滚动，网上查了很多办法，刚开始写的是第一列一个表格，其他内容一个表格。给其他内容设置滚动条。（内容随着后台一直添加，长短不一）

遇到的问题：

1、每行的内容不一样，让每个td的宽度不一样，出来的表格看起来很乱。

解决办法：给table设置 display:flex,   tr td { flex: 1}。

随之而来的问题：多出的内容不显示，那就设置它 自动换行    中文换行是   white-space:pre-wrap;

2、由上面的方法出现的问题：第一列的高度没有内容撑高，高度不一致。

3、网上查了一个方法，接下来用了两个一摸一样的表格，把一个绝对定位到另一个的上面，把除了第一列的其他内容隐藏，用了visibility：hidden，给第二个表格设置滚动，可是因为visibility：hidden占位置，第一个表格盖住了第二个，不能拖动，用display：hidden不占位置，但是内容就又撑不高了。

解决办法：

1、第一个表格绝对定位到第二个表格上，但是外面嵌套的盒子宽度设为第一列的宽度。

2、给第二个表格设置滚动条就可以。

<style>
    table, td, th{
        border:1px solid #ccc;
    }
    table {
        border-collapse: collapse;
        text-align: center;
    }
    table tr:nth-child(even) {
        background:rgba(245,245,245,1);
    }
    th {
        height: 35px;
        background:linear-gradient(0deg,rgba(196,156,90,1) 0%,rgba(226,196,138,1) 100%);
        color: #fff;
    }
    
    tr {
        display: flex;
    }
    tr td, tr th {
        flex: 1;
    }
    td {
         white-space:pre-wrap;
&n