200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > css 修改table边框的样式 修改单元格样式 间距

css 修改table边框的样式 修改单元格样式 间距

时间:2020-09-23 17:53:09

相关推荐

css 修改table边框的样式 修改单元格样式 间距

我们在调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>&nbsp;</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>&nbsp;</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>&nbsp;</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;

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。