前端培训之如何做1像素细边框的table

在Html中使用table是网页制作中必不可缺的一部分,如果直接给css设置table里面的td边框为1像素的话,那么实际我们从网页上看到的效果却不是1像素。

那么我们怎么用css让table的边框为1像素呢?

其实很简单,给table使用css样式 border-collapse: collapse;

这个样式的意思就是“为表格设置合并边框模型”,具体实例代码如下:

方法1:

#test{

border-collapse:

collapse;border:

1px solid #ddd;

}

#test th,#test td{

border:1px solid #ddd;

}
<table id=”test”>

<tr>

<th>姓名</th>

<td>Joy Du</td>

</tr>

<tr>

<th>年龄</th>

<td>26</td>

</tr>

</table>

 

方法2

#test{

border-spacing:1px;background:

#ddd;

}

#test tr{

background:#fff;

}
<table id=”test” cellspacing=”1″>

<tr>

<th>姓名</th>

<td>Joy Du</td>

</tr>

<tr>

<th>年龄</th>

<td>26</td>

</tr>

</table>

IE7及更早浏览器不支持border-spacing属性,但是可以通过table的标签属性cellspacing来替代。

想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训,尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习


上一篇:
下一篇:
关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
全国统一咨询电话:010-56253825
地址:北京市昌平区宏福科技园综合楼6层(北京校区)

深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)

武汉市东湖高新开发区东湖网谷(武汉校区)