解决colspan属性失效，实现复杂的原生table表格

注意事项：

1. 给table加table-layout:fixed;，目的将让第一行成为标准，后面的行的列宽都可以更好的调整。
2. 不要用flex布局让两个标签在一行，会导致colspan属性失效，可以使用将内部标签变成行内元素达到处于一行的效果。
3. 使用style="white-space: nowrap;"，强制文字不换行。 效果图：

html标签

<table class="table-test" style="table-layout:fixed;">
  <tr>
    <th colspan="1" style="width: 12.5%;">姓名</th>
    <td colspan="3" style="width: 37.5%;">{{ editDialogData?.assessedUserName }}</td>
    <th colspan="1" style="width: 12.5%;">职务职级</th>
    <td colspan="3" style="width: 37.5%;">
      <dict-tag :options="position_rank" :value="editDialogData?.positionRank" />
    </td>
  </tr>
  <tr>
    <th colspan="4">考核时间</th>
    <td colspan="4">{{ editDialogData?.planName }}</td>
  </tr>
  <tr>
    <th colspan="4">考核指标</th>
    <th colspan="2">考核要素</th>
    <th colspan="2" style="white-space: nowrap;">分数</th>
  </tr>
  <tr>
    <th :rowspan="commonIndicatorVoListForth?.length+1">共性指标</th>
  </tr>
  <template v-for="(item,index) in commonIndicatorVoListForth" :key="index">
    <tr>
      <td colspan="3" style="white-space: nowrap;">
        <dict-tag :options="common_indicator" :value="item?.indicator" style="display: inline;" />
        <span>({{ item.score }})</span>
      </td>
      <td :colspan="3">{{item.element}}</td>
      <td :colspan="1" style="white-space: nowrap;">{{ item.examinerScore}}</td>
    </tr>
  </template>
  <template v-for="(item,index) in editDialogData?.specIndicatorVoList" :key="index">
    <tr>
      <th rowspan="2" colspan="1" v-if="index === 0">个性指标</th>
      <td rowspan="2" colspan="2" v-if="index === 0">绩</td>
      <td colspan="1" style="white-space: nowrap;">
        <dict-tag :options="spec_indicator" :value="item?.indicator" style="display: inline;" />
        <span>({{ item.score }})</span>
      </td>
      <td colspan="3">
        {{ item.element }}
      </td>
      <td colspan="1">
        {{ item.examinerScore }}
      </td>
    </tr>
  </template>
  <tr>
    <th :rowspan="commonIndicatorVoListOther?.length+1">共性指标</th>
  </tr>
  <template v-for="(item,index) in commonIndicatorVoListOther" :key="index">
    <tr>
      <td colspan="3" style="white-space: nowrap;">
        <dict-tag :options="common_indicator" :value="item?.indicator" style="display: inline;" />
        <span>({{ item.score }})</span>
      </td>
      <td :colspan="3">{{item.element}}</td>
      <td :colspan="1" style="white-space: nowrap;">{{ item.examinerScore}}</td>
    </tr>
  </template>
  <tr>
    <th colspan="7">分数合计</th>
    <td colspan="1">{{ editDialogData?.totalScore }}</td>
  </tr>
  <tr>
    <th colspan="1">个人小结</th>
    <td colspan="7" v-html="editDialogData?.work?.workContent"></td>
  </tr>
  <tr>
    <th colspan="1">领导评鉴</th>
    <td colspan="7">{{ editDialogData?.comment}}</td>
  </tr>
  <tr>
    <th colspan="1">分管领导审核评鉴意见</th>
    <td colspan="3">
      <span style="margin-left: 150px">年</span><span style="margin-left: 40px">月</span><span style="margin-left: 40px">日</span>
    </td>
    <th colspan="1">主要领导或党委（党组审定意见）</th>
    <td colspan="3">
      <span style="margin-left: 150px">年</span><span style="margin-left: 40px">月</span><span style="margin-left: 40px">日</span>
    </td>
  </tr>
</table>

css：

.table-test {
  border-collapse: collapse; /* 合并边框 */
  border: 1px solid #e1e1e1; /* 设置边框 */

  th, td {
    //box-sizing: border-box;
    padding: 10px; /* 设置单元格内边距 */
    border: 1px solid #e1e1e1; /* 设置单元格边框 */
    word-break: break-word;
    overflow: hidden;
  }
}