一个原生table

<table class="new-tableclass" v-if="tableOldData">
              <tr>
                <td colspan="10" class="tableheadclass">干部基本情况登记表</td>
              </tr>
              <tr>
                <td>姓名</td>
                <td>{{ tableNewData.name }}</td>
                <td>性别</td>
                <td colspan="2" class="MergeRows">
                  {{ tableNewData.sex }}
                </td>
                <td colspan="2">出生年月</td>
                <td colspan="2" class="MergeRows">
                  {{ tableNewData.birthDate }}
                </td>
                <td rowspan="4">
                  <img
                    class="imgclass"
                    :src="tableNewData.photograph"
                    style="max-height: 200px"
                    alt=""
                  />
                </td>
              </tr>
              <tr>
                <td>曾用名</td>
                <td>{{ tableNewData.formerName }}</td>
                <td>民族</td>
                <td colspan="2">{{ tableNewData.ethnic }}</td>
                <td colspan="2">身份证号</td>
                <td colspan="2">{{ tableNewData.idCard }}</td>
              </tr>
              <tr>
                <td>籍贯</td>
                <td :style="`color:${getColor('origin')}`">
                  {{ tableNewData.origin }}
                </td>
                <td>婚姻状况</td>
                <td colspan="2" :style="`color:${getColor('maritalStatus')}`">
                  {{ tableNewData.maritalStatus }}
                </td>
                <td colspan="2">健康状况</td>
                <td colspan="2" :style="`color:${getColor('health')}`">
                  {{ tableNewData.health }}
                </td>
              </tr>
              <tr>
                <td>政治面貌</td>
                <td :style="`color:${getColor('politicalStatus')}`">
                  {{ tableNewData.politicalStatus }}
                </td>
                <td>入党时间</td>
                <td colspan="2" :style="`color:${getColor('partyTime')}`">
                  {{ tableNewData.partyTime }}
                </td>
                <td colspan="2">参加工作时间</td>
                <td
                  colspan="2"
                  :style="`color:${getColor('attendWorkingHours')}`"
                >
                  {{ tableNewData.attendWorkingHours }}
                </td>
              </tr>
              <tr>
                <td>单位</td>
                <td colspan="4" :style="`color:${getColor('unit')}`">
                  {{ tableNewData.unit }}
                </td>
                <td colspan="2">单位性质</td>
                <td colspan="3" :style="`color:${getColor('unitStyle')}`">
                  {{ tableNewData.unitStyle }}
                </td>
              </tr>
              <tr>
                <td>现任职务</td>
                <td :style="`color:${getColor('duty')}`">
                  {{ tableNewData.duty }}
                </td>
                <td>拟任职务</td>
                <td colspan="2" :style="`color:${getColor('willDuty')}`">
                  {{ tableNewData.willDuty }}
                </td>
                <td colspan="2">拟免职务</td>
                <td colspan="3" :style="`color:${getColor('leaveDuty')}`">
                  {{ tableNewData.leaveDuty }}
                </td>
              </tr>
              <tr>
                <td>在职状态</td>
                <td :style="`color:${getColor('dutyStatus')}`">
                  {{ tableNewData.dutyStatus }}
                </td>
                <td>级别</td>
                <td colspan="2" :style="`color:${getColor('level')}`">
                  {{ tableNewData.level }}
                </td>
                <td colspan="2">职称</td>
                <td colspan="3" :style="`color:${getColor('jobTitle')}`">
                  {{ tableNewData.jobTitle }}
                </td>
              </tr>
              <tr>
                <td>分管工作</td>
                <td :style="`color:${getColor('manageJob')}`">
                  {{ tableNewData.manageJob }}
                </td>
                <td>现任职时间</td>
                <td colspan="2" :style="`color:${getColor('onboardingTime')}`">
                  {{ tableNewData.onboardingTime }}
                </td>
                <td colspan="2">熟悉专业<br />有何特长</td>
                <td colspan="3" :style="`color:${getColor('majorSpecialty')}`">
                  {{ tableNewData.majorSpecialty }}
                </td>
              </tr>
              <tr>
                <td rowspan="2">学历学位</td>
                <td>全日制教育</td>
                <td
                  colspan="3"
                  :style="`color:${getColor('fullTimeEducational')}`"
                >
                  {{ tableNewData.fullTimeEducational }}
                </td>
                <td colspan="2">毕业院校及<br />专业</td>
                <td
                  colspan="3"
                  :style="`color:${getColor('fullTimeDegreeSchool')}`"
                >
                  {{ tableNewData.fullTimeDegreeSchool }}
                </td>
              </tr>
              <tr>
                <!-- <td rowspan="2">学历学位</td> -->
                <td>在职教育</td>
                <td
                  colspan="3"
                  :style="`color:${getColor('partTimeEducational')}`"
                >
                  {{ tableNewData.partTimeEducational }}
                </td>
                <td colspan="2">毕业院校及<br />专业</td>
                <td
                  colspan="3"
                  :style="`color:${getColor('partTimeQualificationSchool')}`"
                >
                  {{ tableNewData.partTimeQualificationSchool }}
                </td>
              </tr>
              <tr>
                <td>住址</td>
                <td colspan="4" :style="`color:${getColor('address')}`">
                  {{ tableNewData.address }}
                </td>
                <!-- <td>邮编</td>
            <td colspan="2">{{ tableData.postcode }}</td> -->
                <td colspan="2">联系电话</td>
                <td colspan="3" :style="`color:${getColor('phone')}`">
                  {{ tableNewData.phone }}
                </td>
              </tr>
              <tr>
                <td
                  :rowspan="
                    tableNewData.rfBasicCurriculumVitaeBoList.length + 1
                  "
                >
                  简历
                </td>
                <td colspan="2">起始时间</td>
                <td colspan="2">终止时间</td>
                <td colspan="3">所在单位</td>
                <td colspan="3">担任职务</td>
              </tr>

              <tr
                v-for="(
                  item, index
                ) in tableNewData.rfBasicCurriculumVitaeBoList"
                :key="index + 1"
              >
                <td colspan="2" :class="{ 'text-red': !isResumeEqual(item) }">
                  {{ item.startTime }}
                </td>
                <td colspan="2" :class="{ 'text-red': !isResumeEqual(item) }">
                  {{ item.endTime }}
                </td>
                <td colspan="3" :class="{ 'text-red': !isResumeEqual(item) }">
                  {{ item.unit }}
                </td>
                <td colspan="3" :class="{ 'text-red': !isResumeEqual(item) }">
                  {{ item.job }}
                </td>
              </tr>
              <tr>
                <td :rowspan="tableNewData.rfBasicFamilyBoList.length + 1">
                  家庭成员及重要社会关系
                </td>
                <td colspan="1">与本人关系</td>
                <td colspan="1">姓名</td>
                <td colspan="2">出生年月</td>
                <td colspan="2">政治面貌</td>
                <td colspan="4">单位及职务</td>
              </tr>

              <tr
                v-for="(item, index) in tableNewData.rfBasicFamilyBoList"
                :key="index + 1"
              >
                <td colspan="1" :class="{ 'text-red': !isFamilyEqual(item) }">
                  {{ item.relationship }}
                </td>
                <td colspan="1" :class="{ 'text-red': !isFamilyEqual(item) }">
                  {{ item.name }}
                </td>
                <td colspan="2" :class="{ 'text-red': !isFamilyEqual(item) }">
                  {{ item.birthDate }}
                </td>
                <td colspan="2" :class="{ 'text-red': !isFamilyEqual(item) }">
                  {{ item.politicalStatus }}
                </td>
                <td colspan="4" :class="{ 'text-red': !isFamilyEqual(item) }">
                  {{ item.workUnitPosition }}
                </td>
              </tr>

              <tr>
                <td>奖惩<br />情况</td>
                <td
                  colspan="9"
                  class="rewards"
                  style="text-align: left"
                  :style="`color:${getColor('rewardsPunishments')}`"
                >
                  {{ tableNewData.rewardsPunishments }}
                </td>
                <!-- class="rewards" -->
              </tr>

              <tr>
                <td>近三年年度考核结果</td>
                <td colspan="9" class="rewards">
                  <div style="width: 100%; text-align: left">
                    <span :style="`color:${getColor('nearlyCheckYear1')}`">{{
                      tableNewData.nearlyCheckYear1
                    }}</span
                    >年考核结果为
                    <span :style="`color:${getColor('nearlyCheckResult1')}`">{{
                      tableNewData.nearlyCheckResult1
                    }}</span>
                  </div>
                  <div style="width: 100%; text-align: left">
                    <span :style="`color:${getColor('nearlyCheckYear2')}`">{{
                      tableNewData.nearlyCheckYear2
                    }}</span
                    >年考核结果为
                    <span :style="`color:${getColor('nearlyCheckResult2')}`">{{
                      tableNewData.nearlyCheckResult2
                    }}</span>
                  </div>
                  <div style="width: 100%; text-align: left">
                    <span :style="`color:${getColor('nearlyCheckYear3')}`">{{
                      tableNewData.nearlyCheckYear3
                    }}</span
                    >年考核结果为
                    <span :style="`color:${getColor('nearlyCheckResult3')}`">{{
                      tableNewData.nearlyCheckResult3
                    }}</span>
                  </div>
                  <!-- {{ tableData.nearlyCheck }} -->
                </td>
              </tr>
              <tr>
                <td>本人<br />签字</td>
                <td colspan="4" class="rewards">
                  <img
                    v-if="tableNewData.signOssVo"
                    :src="tableNewData.signOssVo.url"
                    alt=""
                    style="width: 200px"
                  />
                </td>
                <td>单位负责人签字（单位盖章）</td>
                <td colspan="4" class="rewards"></td>
              </tr>
            </table>

css

.new-tableclass {
  td {
    height: 50px;
  }
}

.text-red {

    color: red;

  }

  .gerenjingshangclass {

    margin-bottom: 20px;

  }

  table {

    border: 1px solid black;

    border-collapse: collapse;

    text-align: center;

    tr,

    td {

      border: 1px solid black;

    }

    td {

      // width: 100px;

      // height: 40px;

      overflow: hidden;

      word-break: break-all;

      overflow-wrap: break-word;

    }

  }

  .informationBox {

    /* */

    width: 1000px;

    margin: 0 auto;

    .informationInner {

      display: flex;

      justify-content: space-between;

    }

  }

  .imgclass {

    width: 160px;

  }