HTML中table标签的跨多⾏和多列布局⽅法
先放⼀张布局效果效果图
在实现这⼀布局效果时，主要应⽤了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">
<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>
<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;
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;
html网页设计 table 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) {
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论