分开二个部分,头部一个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>就不起作用了,所以说看需求来设置