修改vue页面的表格样式

Question

怎么把网页中的表格改成下面的样式？

代码如下：

   <el-collapse-item name="7">
        <template #title>
          作业评价
        </template>
        <el-row :gutter="40" class="dialogrow">
          <el-table class="margin-top" :column="3" border style="width: 100%" :data="records">
            <el-table-column  label="评分项" align="center"  prop="supItems"></el-table-column>
            <el-table-column  label="评分项评分" align="center" prop="subEvaluationScore" ></el-table-column>
            <el-table-column  label="评价总分" align="center" prop="totalScore" ></el-table-column>
            <el-table-column  label="评价内容" align="center" prop="evalutionContent" ></el-table-column>
          </el-table>
        </el-row>
      </el-collapse-item>

Answer 1

在elementui中tabel表格支持最底部进行合并处理，
倒数第二第三个表格就是你需要的样子，它也支持自定义

https://element.eleme.cn/#/zh-CN/component/table