复杂表格固定表头,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>就不起作用了,所以说看需求来设置

猜你喜欢

转载自blog.csdn.net/weixin_41615439/article/details/90403640