先放一张布局效果效果图
在实现这一布局效果时，主要应用了rowspan、colspan跨行和跨列的属性布局。在所跨的行或者列，在其他行或者列中也是占位的。比如：第一项项目基本信息是跨过5行，因此在接下来的4行中，第一列已经是默认被占了，行中的td列是从第二列开始布局；最后一行，项目得分占据6列，因此第二个td实际对应的是该行的第七列。具体实现代码如下：
HTML布局代码：
<!-- 明细表 --> <div class="chartbox"> <ul class="chartmenu"> <li>模块</li> <li>一级类目</li> <li>评估标准满分</li> <li>项目得分</li> <li>子模块得分（%）</li> <li>权重</li> <li>*权重得分</li> </ul> <table cellpadding="0" cellspacing="0"> <!-- 项目基本信息 --> <tbody> <tr rowspan="6" class="table-row"> <th rowspan="5" class="table-name">项目基本信息</th> <td rowspan="1" class="table-first">项目基本概况</td> <td rowspan="1" class="table-all">-9-</td> <td rowspan="1" class="table-score">-9-</td> <td rowspan="6" class="table-get">83</td> <td rowspan="6" class="table-weight">0.8</td> <td rowspan="6" class="table-weiscore">26.4</td> </tr> <tr class="table-row"> <td class="table-first">团队基本概况</td> <td class="table-all">9</td> <td class="table-score">9</td> </tr> <tr class="table-row"> <td class="table-first">资本市场认可度</td> <td class="table-all">9</td> <td class="table-score">9</td> </tr> <tr class="table-row"> <td class="table-first">项目宣传推广力度</td> <td class="table-all">9</td> <td class="table-score">9</td> </tr> <tr class="table-row"> <td class="table-first">项目热度</td> <td class="table-all">9</td> <td class="table-score">9</td> </tr> <tr class="table-lastrow"> <td class="table-null"></td> <td class="table-first">小计</td> <td class="table-all">9</td> <td class="table-score">9</td> </tr> </tbody> <!-- 项目团队评估 --> <tbody> <tr rowspan="6" class="table-row"> <th rowspan="3" class="table-name">项目团队评估</th> <td rowspan="1" class="table-first">创始人背景信息</td> <td rowspan="1" class="table-all">-9-</td> <td rowspan="1" class="table-score">-9-</td> <td rowspan="4" class="table-get">83</td> <td rowspan="4" class="table-weight">0.8</td> <td rowspan="4" class="table-weiscore">26.4</td> </tr> <tr class="table-row"> <td class="table-first">核心管理团队信息</td> <td class="table-all">9</td> <td class="table-score">9</td> </tr> <tr class="table-row"> <td class="table-first">核心开发团队信息</td> <td class="table-all">9</td> <td class="table-score">9</td> </tr> <tr class="table-lastrow"> <td class="table-null"></td> <td class="table-first">小计</td> <td class="table-all">9</td> <td class="table-score">9</td> </tr> </tbody> <!-- 项目方案评估 --> <tbody> <tr rowspan="6" class="table-row"> <th rowspan="3" class="table-name">项目方案评估</th> <td rowspan="1" class="table-first">创始人背景信息</td> <td rowspan="1" class="table-all">-9-</td> <td rowspan="1" class="table-score">-9-</td> <td rowspan="4" class="table-get">83</td> <td rowspan="4" class="table-weight">0.8</td> <td rowspan="4" class="table-weiscore">26.4</td> </tr> <tr class="table-row"> <td class="table-first">核心管理团队信息</td> <td class="table-all">9</td> <td class="table-score">9</td> </tr> <tr class="table-row"> <td class="table-first">核心开发团队信息</td> <td class="table-all">9</td> <td class="table-score">9</td> </tr> <tr class="table-lastrow"> <td class="table-null"></td> <td class="table-first">小计</td> <td class="table-all">9</td> <td class="table-score">9</td> </tr> </tbody> <!-- 合计 --> <tbody> <tr class="addtotal"> <td colspan="2">合计</td> <td>240</td> <td colspan="3">240</td> <td>240</td> </tr> <tr class="totalscore"> <td colspan="6">项目得分</td> <td>240</td> </tr> </tbody> </table> </div>
css样式代码：
.chartbox { width: 95%; margin: 0 auto; min-height: 300px; } .chartmenu { width: 100%; height: 50px; background-color: #f6fafd; letter-spacing: -0.5em; font-size: 0; } .chartmenu li { letter-spacing: normal; display: inline-block; vertical-align: top; font-size: 14px; line-height: 50px; color: #333; text-align: center; } .chartmenu li:nth-of-type(1) { width: 135px; } .chartmenu li:nth-of-type(2) { width: 185px; } .chartmenu li:nth-of-type(3) { width: 130px; } .chartmenu li:nth-of-type(4) { width: 110px; } .chartmenu li:nth-of-type(5) { width: 150px; } .chartmenu li:nth-of-type(6) { width: 100px; } .chartmenu li:nth-of-type(7) { width: 140px; } .table-row .table-name { width: 134px; vertical-align: middle; font-size: 14px; color: #333; border-left: 1px solid #c8e5fa; } .table-row .table-first { width: 183px; text-align: center; vertical-align: top; height: 44px; line-height: 44px; border-bottom: 1px solid #c8e5fa; border-left: 1px solid #c8e5fa; border-right: 1px solid #c8e5fa; } .table-row .table-all { width: 130px; text-align: center; vertical-align: top; height: 44px; line-height: 44px; border-bottom: 1px solid #c8e5fa; } .table-row .table-score { width: 108px; text-align: center; vertical-align: top; height: 44px; line-height: 44px; border-bottom: 1px solid #c8e5fa; border-left: 1px solid #c8e5fa; border-right: 1px solid #c8e5fa; } .table-row .table-get { width: 149px; text-align: center; vertical-align: middle; border-bottom: 1px solid #c8e5fa; border-right: 1px solid #c8e5fa; } .table-row .table-weight { width: 99px; text-align: center; vertical-align: middle; border-bottom: 1px solid #c8e5fa; border-right: 1px solid #c8e5fa; } .table-row .table-weiscore { width: 139px; text-align: center; vertical-align: middle; border-bottom: 1px solid #c8e5fa; border-right: 1px solid #c8e5fa; } .table-lastrow { height: 30px; line-height: 30px; background-color: #f6fafd; text-align: center; } .table-lastrow td:last-child { border-right: 1px solid #c8e5fa; } .table-lastrow td:first-child { border-left: 1px solid #c8e5fa; } .addtotal { height: 40px; line-height: 40px; text-align: center; } .addtotal td:nth-of-type(1) { border-left: 1px solid #c8e5fa; border-right: 1px solid #c8e5fa; } .addtotal td:nth-of-type(3) { border-left: 1px solid #c8e5fa; border-right: 1px solid #c8e5fa; } .addtotal td:last-child { border-right: 1px solid #c8e5fa; } .totalscore { height: 50px; background-color: #f6fafd; line-height: 50px; text-align: center; font-weight: 600; } .totalscore td { border-bottom: 1px solid #c8e5fa; } .totalscore td:nth-of-type(1) { border-left: 1px solid #c8e5fa; border-right: 1px solid #c8e5fa; } .totalscore td:nth-of-type(2) { border-right: 1px solid #c8e5fa; } 通过以上，就能达到本文开篇效果图的布局了。文章来源: HTML中table标签的跨多行和多列布局方法