我们在调table的边框样式时,经常会出现单元格和表格的样式重叠,而造成某条边框的的异常粗,或者异常细。
修改单元格间距:
cellspacing="0"
修改table标签的样式:
<tableborder="1"style="width:100%;text-align:center;border:1pxsolid#ccc;"cellspacing="0">
<tr>
<tdcolspan="3">合计</td>
</tr>
<tr>
<tdwidth="33.3%">灾害点</td>
<tdwidth="33.3%">户数</td>
<tdwidth="33.3%">人数</td>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
</tr>
<tr>
<tdcolspan="3">地质灾害搬迁</td>
</tr>
<tr>
<tdwidth="33.3%">隐患点</td>
<tdwidth="33.3%">户数</td>
<tdwidth="33.3%">人数</td>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
</tr>
<tr>
<tdcolspan="3">洪涝灾害搬迁</td>
</tr>
<tr>
<tdwidth="33.3%">隐患点</td>
<tdwidth="33.3%">户数</td>
<tdwidth="33.3%">人数</td>
</tr>
<tr>
<td> </td>
<td></td>
<td></td>
</tr>
</table>
边框粗细不一致:
table{
border-collapse:separate!important;
border:1pxsolid#ddd;
}
td{
padding:8px0;
border:1pxsolid#eee;
}
tr.tableList:nth-of-type(2n+1){
background-color:#f8f8f9;
}
tr.tableList:nth-of-type(2n){
background-color:#fff;
}
tr.tableList:hover{
background-color:#f0faff;
}