複雜表格固定表頭，tbody可以滾動

分開二個部分，頭部一個div加一個表格，表體一個div加一個表格

頭部：

					<div class="dtable">
						<table class="table tabless">
							<colgroup>
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
							</colgroup>
							<thead>
								<tr>
									<th rowspan="2">1</th>
									<th rowspan="2">2</th>
									<th colspan="2">3</th>
									<th rowspan="2">4</th>
									<th colspan="2">5</th>
									<th rowspan="2">6</th>

								</tr>
                                  //這裏是頭部合併單元格
								<tr>
									<th>7</th>
									<th>8</th>
									<th>9</th>
									<th>10</th>
								</tr>
							</thead>
						</table>
					</div>

表體的html：

					<div class="divtable">
						<table class="tables ts">
							<colgroup>
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
							</colgroup>
							<tbody class="gdjtbodys">
								<tr>
									<td rowspan="17" class="borders bor">4-1</td>
									<td class="borders">1</td>
									<td class="borders">560001</td>
									<td class="borders">123</td>
									<td class="borders">560001</td>
									<td class="borders">560001</td>
									<td class="borders">560001</td>
									<td class="borders">560001</td>
								</tr>
								<tr>
									<td>2</td>
									<td>400003</td>
									<td>Bangalore</td>
									<td>560001</td>
									<td>560001</td>
								</tr>
								<tr>
									<td>3</td>
									<td>411027</td>
									<td>Bangalore</td>
									<td>560001</td>
									<td>560001</td>
								</tr>
								<tr>
									<td>4</td>
									<td>560001</td>
									<td>Bangalore</td>
									<td>560001</td>
									<td>560001</td>
								</tr>
								<tr>
									<td>5</td>
									<td>400003</td>
									<td>Bangalore</td>
									<td>560001</td>
									<td>560001</td>
								</tr>
								<tr>
									<td>6</td>
									<td>411027</td>
									<td>Bangalore</td>
									<td>560001</td>
									<td>560001</td>
								</tr>
								<tr>
									<td>7</td>
									<td>560001</td>
									<td>Bangalore</td>
									<td>560001</td>
									<td>560001</td>
								</tr>
								<tr>

									<td>8</td>

									<td>400003</td>
									<td>Bangalore</td>
									<td>560001</td>
									<td>560001</td>
								</tr>
								<tr>
									<td>9</td>
									<td>411027</td>
									<td>Bangalore</td>
									<td>560001</td>
									<td>560001</td>
								</tr>
								<tr>
									<td>10</td>
									<td>560001</td>
									<td>Bangalore</td>
									<td>560001</td>
									<td>560001</td>
								</tr>
								<tr>
									<td>11</td>
									<td>Mumbai</td>
									<td>400003</td>
								</tr>
								<tr>
									<td>12</td>
									<td>Pune</td>
									<td>411027</td>
								</tr>
								<tr>
									<td>13</td>
									<td>560001</td>
									<td>Bangalore</td>
									<td>560001</td>
									<td>560001</td>
								</tr>
								<tr>
									<td>14</td>
									<td>Mumbai</td>
									<td>400003</td>
								</tr>
								<tr>
									<td>15</td>
									<td>Pune</td>
									<td>411027</td>
								</tr>
								<tr>
									<td>16</td>
									<td>560001</td>
									<td>Bangalore</td>
									<td>560001</td>
									<td>560001</td>
								</tr>
								<tr>
									<td>17</td>
									<td>Mumbai</td>
									<td>400003</td>
								</tr>
								<tr>
									<td>Uma</td>
									<td>Pune</td>
									<td>411027</td>
								</tr>
								<tr>
									<td>Bangalore</td>
									<td>560001</td>
									<td>Bangalore</td>
									<td>560001</td>
									<td>560001</td>
								</tr>
								<tr>
									<td>Sachin</td>
									<td>Mumbai</td>
									<td>400003</td>
								</tr>
								<tr>
									<td>Uma</td>
									<td>Pune</td>
									<td>411027</td>
								</tr>
								<tr>
									<td>Bangalore</td>
									<td>560001</td>
									<td>Bangalore</td>
									<td>560001</td>
									<td>560001</td>
								</tr>
								<tr>
									<td>Sachin</td>
									<td>Mumbai</td>
									<td>400003</td>
								</tr>
								<tr>
									<td>Uma</td>
									<td>Pune</td>
									<td>411027</td>
								</tr>
							</tbody>
						</table>
					</div>

表體的css：

.divtable{
	height: 87%;
	color:#fff;
	margin-top:-30px;
	text-align: center;
	overflow-y: scroll;
	overflow-x: hidden;
}
.dtable{
	width:calc(100% - 17px);
	text-align: center;
	 height:20%;
}

關鍵的代碼部分：

<colgroup>
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
							</colgroup>//這部分代碼要放在在表頭的table以及表體的table裏面，作用是爲了讓表頭和表體的列對齊,有多少列就有多少個<col/>

整體的html:

<div class="dtable">
				<table class="table tabless">
							<colgroup>
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
							</colgroup>
							<thead>
								<tr>
									<th rowspan="2">1</th>
									<th rowspan="2">2</th>
									<th colspan="2">3</th>
									<th rowspan="2">4</th>
									<th colspan="2">5</th>
									<th rowspan="2">6</th>

								</tr>
								<tr>
									<th>7</th>
									<th>8</th>
									<th>9</th>
									<th>10</th>
								</tr>
							</thead>
						</table>
					</div>
					<div class="divtable">
						<table class="tables ts">
							<colgroup>
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
								<col style="width: 12%;" />
							</colgroup>
							<tbody class="gdjtbodys">
								
							</tbody>
						</table>
					</div>

 

總結：如果把tbody設置成display:table的話也可以讓表體滾動，表頭固，但是表體裏面的<td rowspan="17"></td>就不起作用了，所以說看需求來設置