关于element-ui表格合并项需动态展示在可视区域范围内的解决方案

问题来源： 如果合并项过多，首列id列在可视区域无法展示出id，实际案例如图： 如何解决： 直接使用sticky定位来达到首列内容跟随表格滚动条动态居中展示在可视区域内。

<template>
   <el-table
                :data="tableData"
                :span-method="objectSpanMethod"
                border
                style="width: 100%; margin-top: 20px" max-height="400">
            <el-table-column
                    prop="id"
                    label="ID"
                    width="180" class-name="text-box">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名">
            </el-table-column>
            <el-table-column
                    prop="amount1"
                    label="数值 1（元）">
            </el-table-column>
            <el-table-column
                    prop="amount2"
                    label="数值 2（元）">
            </el-table-column>
            <el-table-column
                    prop="amount3"
                    label="数值 3（元）">
            </el-table-column>
        </el-table>
</template>
<style>
    tbody .text-box .cell {
        position: sticky;
        top: 160px;
        bottom: 160px;
        margin: auto;
    }
</style>

上述样式中top+bottom不可超过表格tbody的高度，否则margin: auto;会失效。

掘友们有其他实现方式吗，互相学习，互相探讨一下。