求问前端如何实现一个业务表格，要求能够固定首列，其余列滚动，点击一行在该行下展开一行且固定住，左右滑动其他列的时候固定的行不动？

[meetKuqi2588]

需求如标题所示，目前已经写了代码结构如下，现在遇到的问题有两个。 其一：固定住展开的行，使其不随着其他列滚动。 其二：展开的行由于合并了剩余的列，导致宽度为所有列宽的总和，比如有五个列，每个列的宽度为 100 ，则最后展开的行的宽度为 100x5=500,如何让整个展开的行宽度为屏幕的宽度。

<template>
  <div class="bg-07 w-full overflow-hidden">
    <div class="overflow-auto">
      <table class="w-full">
        <thead class="w-full relative">
          <tr class="w-full">
            <td class="w-150px fixedTd">姓名</td>
            <td class="w-150px">性别</td>
            <td class="w-90px">年龄</td>
            <td class="w-90px">收入</td>
            <td class="w-90px">工作</td>
          </tr>
        </thead>
        <tbody class="w-full relative">
          <template v-for="(item, index) in tableData" :key="index">
            <!-- <TrItem v-model:currentExpIndex="currentExpIndex" :line-data="item" :self-index="index"></TrItem> -->
            <tr class="w-full">
              <td class="fixedTd">
                <div class="w-150px">{{ item.name }}</div>
              </td>
              <td>
                <div class="w-150px">{{ item.age }}</div>
              </td>
              <td>
                <div class="w-90px">{{ item.sex }}</div>
              </td>

              <td>
                <div class="w-90px">{{ item.income }}</div>
              </td>

              <td>
                <div class="w-90px">{{ item.job }}</div>
              </td>
            </tr>
            // 需要展开的行
            <tr v-if="currentExpIndex === index" class="w-375px sticky bg-02">
              <td colspan="5" class="w-375px expandTr top-0">合并单元格</td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import TrItem from './TrItem.vue';
const tableData = [
  {
    name: '1',
    age: '2',
    sex: '3',
    income: '4',
    job: '5'
  },
  {
    name: '3',
    age: '5',
    sex: '6',
    income: '7',
    job: '8'
  },
  {
    name: '23',
    age: '43',
    sex: '43',
    income: '43',
    job: '54'
  },
  {
    name: '5',
    age: '4',
    sex: '3',
    income: '2',
    job: '1'
  }
];
let exp = ref(false);
let currentExpIndex = ref(-1);
function expand() {
  exp.value = !exp.value;
}
</script>

<style scoped>
.fixedTd {
  position: sticky;
  top: 0;
  left: 0;
  background: #fff;
}
.expandTr {
  position: sticky;
  top: 0px;
  left: 0px;
  width: 375px;
}
</style>

求来个大佬解答