css怎么设置table表格的边框为单线边框？（代码详解）table表格边框怎么设置为单线边框？本篇⽂章就给⼤家介绍⼀种css设置table表格的边框为单线边框的⽅法。有⼀定的参考价值，有需要的朋友可以参考⼀下，希望对你们有所帮助。
⾸先我们来看看给table表格添加边框后，它的默认效果：
1 2 3 4 5 6table,table  td{
border: 1px solid#000; }
table  td{
padding: 10px30px;
}
可以看出，table表格是以双线的形式显⽰的，那么如何让table表格以单线边框的⽅式现实中html页⾯上？
下⾯我们就通过简单的代码⽰例来讲解⼀种table表格设置单线边框的⽅法。
css设置单线边框的⽅法介绍：
我们先要在html页⾯建⽴table表格，代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28<table>
<tr>
<td>内容</td>        <td>内容</td>        <td>内容</td>        <td>内容</td>        <td>内容</td>    </tr>
<tr>
<td>内容</td>        <td>内容</td>        <td>内容</td>        <td>内容</td>        <td>内容</td>    </tr>
<tr>
<td>内容</td>        <td>内容</td>        <td>内容</td>        <td>内容</td>        <td>内容</td>    </tr>
<tr>
<td>内容</td>        <td>内容</td>        <td>内容</td>        <td>内容</td>        <td>内容</td>
28 29 30        <td>内容</td>    </tr>
</table>
效果图：
table表格建好了，下⾯我们就看看⽤css怎么给table表格添加单线边框。
1、⾸先给整个table表格的外边框加上左边框和上边框
1 2 3 4 5table {
width: 200px;
border-top: 1px solid#999; border-left: 1px solid#999;
}
2、在给table表格⾥的每个单元格添加下边框和右边框
1 2 3 4 5table td {
padding: 10px30px;
border-bottom: 1px solid#999;    border-right: 1px solid#999;
}
3、去掉单元格的间隙
1 2 3 4 5 6table {
width: 200px;
border-top: 1px solid#999;
border-left: 1px solid#999;
border-spacing: 0;/*去掉单元格间隙*/ }
table设置内边框
说明：
border-spacing 属性：可以设置相邻单元格的边框间的距离（仅⽤于“边框分离”模式）。
当我们设置border-spacing: 0；时，就表⽰table表格中每个相邻单元格的边框间（⽔平和垂直⽅向）的距离都为0。
效果图：
总结：以上就是本篇⽂章所介绍的css table表格单线边框的⼀种实现⽅法，希望能对⼤家的学习有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。