<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>合并表格</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.rg{
border-right: 1px solid white;
}
.rg,.ru{
text-align:center;
background-color: #777777;
}
.f,.d,.fir{
background-color: #8F8F8F;
}
tr,th{
text-align:center;
}
</style>
</head>
<body>
<table class="table">
<tbody>
<tr> <!--左右合并4列--> <!--左右合并4列-->
<th colspan="4" class="rg">1</th><th colspan="4" class="ru">2</th>
</tr>
<tr class="fir">
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
</tr>
<tr>
<td rowspan="5" class="f">1</td><!--上下合并5行-->
<td>A</td>
<td>B</td>
<td>C</td>
<td rowspan="5" class="d">D</td><!--上下合并5行-->
<td>E</td>
<td>F</td>
<td>G</td>
</tr>
<tr>
<!--<td>1</td>--><!--对应位置为空即可-->
<td>A</td>
<td>B</td>
<td>C</td>
<!--<td>D</td>--><!--对应位置为空即可-->
<td>E</td>
<td>F</td>
<td>G</td>
</tr>
<tr>
<!--<td>1</td>--><!--对应位置为空即可-->
<td>A</td>
<td>B</td>
<td>C</td>
<!--<td>D</td>--><!--对应位置为空即可-->
<td>E</td>
<td>F</td>
<td>G</td>
</tr>
<tr>
<!--<td>1</td>--><!--对应位置为空即可-->
<td>A</td>
<td>B</td>
<td>C</td>
<!--<td>D</td>--><!--对应位置为空即可-->
<td>E</td>
<td>F</td>
<td>G</td>
</tr>
<tr>
<!--<td>1</td>--><!--对应位置为空即可-->
<td>A</td>
<td>B</td>
<td>C</td>
<!--<td>D</td>--><!--对应位置为空即可-->
<td>E</td>
<td>F</td>
<td>G</td>
</tr>
</tbody>
</table>
</body>
</html>
