如何强制Vuetify表格使用固定表头宽度？

我需要基于配置文件动态计算Vuetify表格表头的rowspan和colspan，同时给无子表头的列设置固定宽度。我尝试了如下代码，但设置的固定宽度（比如第一列220px）并未生效，实际渲染宽度只有约109px，请问如何让Vuetify表格应用预期的固定宽度？

<template>
  <v-table>
    <thead>
      <tr>
        <th :colspan="5">usability</th>
        <th :colspan="3">risk management</th>
        <th>back to usability</th>
      </tr>
      <tr>
        <th style="width: 220px">user tasks</th>
        <th style="width: 200px">subtasks</th>
        <th style="width: 200px">usescenarios</th>
        <th style="width: 220px">usescenario tasks</th>
        <th style="width: 250px">useerrors</th>
        <th style="width: 220px">sequence of events</th>
        <th style="width: 220px">risks</th>
        <th style="width: 220px">risk control measures</th>
        <th style="width: 220px">system requirements</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td v-for="index in 9" :key="index">
          <span
            >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
            nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
            erat, sed diam voluptua.</span
          >
        </td>
      </tr>
    </tbody>
  </v-table>
</template>

Vuetify的v-table默认使用浏览器自动布局（table-layout: auto），这种模式下浏览器会根据内容自动调整列宽，直接覆盖手动设置的宽度值。要强制应用固定宽度，需要做以下调整：

• 切换表格布局为固定模式
  给v-table添加样式，将table-layout设为fixed，同时指定表格总宽度（可设为具体数值或100%）：

<v-table style="table-layout: fixed; width: 100%;">

• 同步表头与单元格的宽度设置
  仅给表头<th>设宽度不够，需要给对应列的<td>也设置相同宽度。如果是动态配置，可以用配置数组循环渲染：

<template>
  <v-table style="table-layout: fixed; width: 100%;">
    <!-- 表头部分 -->
    <thead>
      <tr>
        <th :colspan="5">usability</th>
        <th :colspan="3">risk management</th>
        <th>back to usability</th>
      </tr>
      <tr>
        <th v-for="col in columns" :key="col.key" :style="{ width: col.width }">
          {{ col.label }}
        </th>
      </tr>
    </thead>
    <!-- 内容部分 -->
    <tbody>
      <tr>
        <td v-for="col in columns" :key="col.key" :style="{ width: col.width }">
          <span>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
          </span>
        </td>
      </tr>
    </tbody>
  </v-table>
</template>

<script setup>
const columns = [
  { key: 'tasks', label: 'user tasks', width: '220px' },
  { key: 'subtasks', label: 'subtasks', width: '200px' },
  { key: 'scenarios', label: 'usescenarios', width: '200px' },
  { key: 'scenarioTasks', label: 'usescenario tasks', width: '220px' },
  { key: 'errors', label: 'useerrors', width: '250px' },
  { key: 'events', label: 'sequence of events', width: '220px' },
  { key: 'risks', label: 'risks', width: '220px' },
  { key: 'measures', label: 'risk control measures', width: '220px' },
  { key: 'requirements', label: 'system requirements', width: '220px' },
]
</script>

• 处理内容溢出问题
  使用固定布局后，过长内容可能撑破单元格，建议添加溢出样式：

.v-table th, .v-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

若需要保留换行显示，可将white-space改为normal，但需注意表格行高的一致性。

内容的提问来源于stack exchange，提问作者baitendbidz