在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来替代。
想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训，尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习
上一篇: 前端培训课程怎么学
下一篇: 前端培训之以图换字的几种方法及优劣分析
