先放一张布局效果效果图
在实现这一布局效果时，主要应用了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;
}
通过以上，就能达到本文开篇效果图的布局了。
版权声明：本文为weixin_37861326原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。