原生table的使用

<template>
  <div>
    <table style="width: 70%; border-color: #ccc; border-collapse: collapse;" border="1" cellspacing="0" cellpadding="0">
      <tr>
        <th rowspan="8" class="firstTitle">贮存措施</th>
        <td colspan="11" class="list">
          <p>1、贮存场所是否符合《危险废物贮存污染控制标准》有关要求: 是</p>
          <p>2、是否按危险废物特性分类收集、贮存: 是</p>
          <p>3、是否混合贮存未经安全性处置且性质不相容的危险废物: 是</p>
          <p>4、是否将危险废物混入非危险废物中贮存: 是</p>
          <p>5、是否通过建设项目环境影响评价审批及竣工环境保护验收: 是</p>
        </td>
      </tr>
      <tr>
        <th colspan="11">危险废物贮存设施现状</th>
      </tr>
      <tr>
        <th colspan="3">设施名称</th>
        <th colspan="2">数量</th>
        <th colspan="2">类型</th>
        <th colspan="2">面积/体积</th>
        <th colspan="2">贮存能力</th>
      </tr>
      <tr>
        <td colspan="3">储存间</td>
        <td colspan="2">储存间</td>
        <td colspan="2">储存间</td>
        <td colspan="2">储存间</td>
        <td colspan="2">储存间</td>
      </tr>
      <tr>
        <th colspan="11">贮存危险废物情况</th>
      </tr>
      <tr>
        <td>是否豁免</td>
        <td>废物代码</td>
        <td>名称</td>
        <td>俗称</td>
        <td>有害物质成分</td>
        <td>类别</td>
        <td>贮存设施设备</td>
        <td>拟贮存量(吨)</td>
        <td>上年度贮存量(吨)</td>
        <td>截止上年度年底累计贮存量(吨)</td>
        <td>贮存原因</td>
      </tr>
      <tr>
        <td>豁免</td>
        <td>豁免</td>
        <td>豁免</td>
        <td>豁免</td>
        <td>豁免</td>
        <td>豁免</td>
        <td>豁免</td>
        <td>豁免</td>
        <td>豁免</td>
        <td>豁免</td>
        <td>豁免</td>
      </tr>
      <tr>
        <td colspan="11">
          <p class="list">贮存过程中采取的污染防治和事故预防措施:</p>
        </td>
      </tr>
      <tr>
        <th rowspan="2" class="firstTitle">运输措施</th>
        <td colspan="11" class="list">
          <p>1、运输过程中是否遵守危险货物运输管理的规定: 是</p>
          <p>2、是否按危险废物特性分类运输: 是</p>
          <p>3、是否委托运输: 是</p>
          <p>4、运输企业: 是</p>
        </td>
      </tr>
      <tr>
        <td colspan="11" class="list">
          <p>运输过程中采取的污染防治措施(如自行运输危险废物的，还应包括工具种类、载重量、使用年限等):</p>
        </td>
      </tr>
      <tr>
        <th class="firstTitle">转移计划</th>
        <td colspan="11" class="list">
          <p>包括拟转移危险废物种类、数量、拟接受危险废物的单位等:</p>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  //import引入的组件
  components: {},
  data() {
    return {};
  },
  //方法集合
  methods: {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
};
</script>
<style scoped>
th {
  font-size: 14px;
}
tr {
  height: 40px;
  text-align: center;
}
td {
  text-align: center;
}
.firstTitle {
  width: 20px;
}
.list {
  text-align: left;
}
p {
  padding: 5px;
}
</style>

效果