css表格合并边框以及单元格宽度计算方式

<template>
  <div style="height: 100%;">
    <table style="table-layout: fixed">
      <tr>
        <td style="width: 100px">
          <span>这是一段中文这是一段中文这是一段中文</span>
        </td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
    </table>

    <table style="border-collapse: collapse">
      <tr>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
    </table>

    <table>
      <tr style="height: fit-content">
        <td>
          这是一段中文<br/>这是一段中文<br/>这是一段中文<br/>
        </td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
      </tr>
    </table>
  </div>
</template>

<script>
  export default {
    name: "a8"
  }
</script>

<style scoped>
  table:nth-of-type(1) {
    width: 100%;
    height: 33%;
  }

  table:nth-of-type(2) {
    width: 100%;
    height: 34%;
  }

  table:nth-of-type(3) {
    width: 100%;
    height: 33%;
  }

  td {
    border: 1px solid black;
  }

  span {
    white-space: nowrap;
  }
</style>