效果:
使用【colspan】合并行 和【rowspan】合并列
html:
<!-- 添加或修改报告数据库对话框 --><el-dialog :title="title" :visible.sync="open" width="1500px" append-to-body><el-form ref="form" :model="form" :rules="rules" label-width="150px"><table class="bigtable"><caption>报告案例分析表</caption><tbody><tr><th>项目基本信息</th><td colspan="11" class="endu-td"><table class="smalltable"><tr><th class="td-01 td-02">项目领域</th><th class="td-02 td-03">开展年份</th><th class="td-02 td-03">项目名称</th><th class="td-02 td-03">委托单位</th><th class="td-02 td-03">主管部门</th><th class="td-02 td-03">项目单位</th><th class="td-02 td-03">资金类型</th><th class="td-02 td-03">评价类型</th><th class="td-02 td-03">报告类型</th><th class="td-02 td-03">质量品质</th><th class="td-02 td-03">级别</th></tr><tr><td class="td-01 td-04">项目领域</td><td class="td-02 td-04">开展年份</td><td class="td-02 td-04">项目名称</td><td class="td-02 td-04">委托单位</td><td class="td-02 td-04">主管部门</td><td class="td-02 td-04">项目单位</td><td class="td-02 td-04">资金类型</td><td class="td-02 td-04">评价类型</td><td class="td-02 td-04">报告类型</td><td class="td-02 td-04">质量品质</td><td class="td-03 td-04">级别</td></tr></table></td></tr><tr><th>取得成就</th><td colspan="4">取得成就</td></tr><tr><th>整体结论</th><td colspan="4">整体结论</td></tr><tr><th>问题和建议</th><td colspan="3" class="endu-td"><table class="smalltable"><tr><th colspan="4" class="td-01 td-02">问题</th><th colspan="1" rowspan ="2" class="td-02 td-03">建议 </th></tr><tr><th class="td-01 td-02">一级问题分类</th><th class="td-02 td-03">二级问题分类</th><th class="td-02 td-03">三级问题分类</th><th class="td-02 td-03">问题内容</th></tr><tr><td class="td-01 td-04">一级问题分类</td><td class="td-03 td-04">一级问题分类</td><td class="td-03 td-04">一级问题分类</td><td class="td-03 td-04">问题</td><td class="td-03 td-04">建议</td></tr></table></td></tr><tr><th>指标分析</th><td colspan="3" class="endu-td"><table class="smalltable"><tr><th colspan="4" class="td-01 td-02">指标分类</th><th colspan="4" class="td-02 td-03">指标描述</th></tr><tr><th class="td-01 td-02">一级指标名称</th><th class="td-02 td-03">二级指标名称</th><th class="td-02 td-03">三级指标名称</th><th class="td-02 td-03">四级指标名称</th><th class="td-02 td-03">涉标及一级问题</th><th class="td-02 td-03">涉标及二级问题</th><th class="td-02 td-03">涉标及三级问题</th><th class="td-02 td-03">指标描述</th></tr><tr><td class="td-01 td-04">一级指标名称</td><td class="td-02 td-04">二级指标名称</td><td class="td-02 td-04">三级指标名称</td><td class="td-02 td-04">四级指标名称</td><td class="td-02 td-04">涉标及一级问题</td><td class="td-02 td-04">涉标及二级问题</td><td class="td-02 td-04">涉标及三级问题</td><td class="td-03 td-04">指标描述</td></tr></table></td></tr></tbody></table></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog>css:
<style scoped>
/* 自己定义的类名，设置宽度和文本对齐方式 */
.bigtable {width: 1400px;text-align: center;margin-left: 30px;
}/* 设置宽度和边框 */
.smalltable {width: 100%;border: none;
}table {/* 合并边框 */border-collapse: collapse;/* 边框颜色 */border-color: black;/* 边框宽度 */border-width: 1px;/* 设置边框样式是实线 */border-style: solid;
}/* 设置行高 */
tr {height: 75px;
}/* 设置单元格的样式 */
td {border-color: black;border-width: 1px;border-style: solid;width: 220px;
}th {border-color: black;border-width: 1px;border-style: solid;width: 220px;background-color: rgb(210, 230, 243);
}.operate {width: 80px;
}/* 设置caption的字体大小和字体粗细 */
caption {font-weight: 800px;font-size: 30px;
}/* 设置这个类的文本对齐方式为左对齐 */
.geshi {text-align: left;
}.endu-td {/* 内边距为零 */padding: 0;
}.td-01 {/* 无左边框 */border-left: none;
}.td-02 {/* 无上边框 */border-top: none;
}.td-03 {/* 无右边框 */border-right: none;
}.td-04 {/* 无下边框 */border-bottom: none;
}
</style>
