1. 激活谷首页
  2. 激活谷笔记

html表单边框怎么设置_HTML表格

• 激活谷笔记

html表单边框怎么设置_HTML表格css怎么设置table表格的边框为单线边框？（代码详解）table表格边框怎么设置为单线边框？本篇文章就给大家介绍一种css设置table表格的边框为单线边框的方法。有一定的参考价值，有需要的朋友可以参

css怎么设置table表格的边框为单线边框？（代码详解） 　　table表格边框怎么设置为单线边框？本篇文章就给大家介绍一种css设置table表格的边框为单线边框的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。 　　首先我们来看看给table表格添加边框后，它的默认效果： 　　table,table td{ border: 1px solid #000; } table td{ padding: 10px 30px; } 　　
1.jpg 　　可以看出，table表格是以双线的形式显示的，那么如何让table表格以单线边框的方式现实中html页面上？下面我们就通过简单的代码示例来讲解一种table表格设置单线边框的方法。 　　css设置单线边框的方法介绍： 　　我们先要在html页面建立table表格，代码如下： 　　<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> </tr> </table> 　　效果图： 　　
4.jpg 　　table表格建好了，下面我们就看看用css怎么给table表格添加单线边框。 　　1、首先给整个table表格的外边框加上左边框和上边框 　　table { width: 200px; border-top: 1px solid #999; border-left: 1px solid #999; } 　　
6.jpg 　　2、在给table表格里的每个单格添加下边框和右边框 　　table td { padding: 10px 30px; border-bottom: 1px solid #999; border-right: 1px solid #999; } 　　
5.jpg 　　3、去掉单格的间隙 　　table { width: 200px; border-top: 1px solid #999; border-left: 1px solid #999; border-spacing: 0;/*去掉单格间隙*/ } 　　说明： 　　border-spacing 属性：可以设置相邻单格的边框间的距离（仅用于“边框分离”模式）。 　　当我们设置border-spacing: 0;时，就表示table表格中每个相邻单格的边框间（水平和垂直方向）的距离都为0。 　　效果图： 　　
3.jpg 　　总结：以上就是本篇文章所介绍的css table表格单线边框的一种实现方法，希望能对大家的学习有所帮助。更多相关教程请访问： CSS基础视频教程， HTML视频教程，bootstrap视频教程！

2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/46840.html

赞 (0)
0
上一篇 2024年 9月 4日 下午11:12
下一篇 2024年 9月 4日 下午11:16

相关推荐

关注微信