css怎么设置table表格的边框为单线边框？（代码详解）

table表格边框怎么设置为单线边框？本篇文章就给大家介绍一种css设置table表格的边框为单线边框的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

首先我们来看看给table表格添加边框后，它的默认效果：

table,table td{

border: 1px solid #000;

}

table td{

padding: 10px 30px;

}

可以看出，table表格是以双线的形式显示的，那么如何让table表格以单线边框的方式现实中html页面上？下面我们就通过简单的代码示例来讲解一种table表格设置单线边框的方法。

css设置单线边框的方法介绍：

我们先要在html页面建立table表格，代码如下：

<table>

<tr>

<td>内容</td>

</tr>

<tr>

<td>内容</td>

</tr>

<tr>

<td>内容</td>

</tr>

<tr>

<td>内容</td>

</tr>

</table>

效果图：

table表格建好了，下面我们就看看用css怎么给table表格添加单线边框。

1、首先给整个table表格的外边框加上左边框和上边框

table {

width: 200px;

border-top: 1px solid #999;

border-left: 1px solid #999;

}

2、在给table表格里的每个单元格添加下边框和右边框

table td {

padding: 10px 30px;

border-bottom: 1px solid #999;

border-right: 1px solid #999;

}

3、去掉单元格的间隙

table {

width: 200px;

border-top: 1px solid #999;

border-left: 1px solid #999;

border-spacing: 0;/*去掉单元格间隙*/

}

说明：

border-spacing 属性：可以设置相邻单元格的边框间的距离（仅用于“边框分离”模式）。

当我们设置border-spacing: 0;时，就表示table表格中每个相邻单元格的边框间（水平和垂直方向）的距离都为0。

效果图：

总结：以上就是本篇文章所介绍的css table表格单线边框的一种实现方法，希望能对大家的学习有所帮助。

css怎么设置table表格的边框为单线边框？（代码详解）相关推荐

php怎么自定义设置打印区域,JavaScript_jQuery实现区域打印功能代码详解，使用CSS控制打印样式，需要设 - phpStudy...
jQuery实现区域打印功能代码详解使用CSS控制打印样式,需要设置样式media="print",并且将页面中不需要打印的元素的样式display属性设置为none.如DEMO ...
css设置html表格边框颜色,互联网常识：CSS如何设置htmltable表格边框样式
设置表格边框样式的方法:1.给table元素添加"border:边框宽度边框样式边框颜色"样式,可给整个表格设置边框样式:2.给td元素添加"border:边框宽度 ...
php修改table样式,CSS怎么设置table边框样式
今天和大家说一下CSS如何设置table表格边框样式,对table设置CSS样式边框分为4种情况,以下分别详细讲解这四种情况需要怎么处理. 1.只对table设置边框 2.对td设置边框 3.对tab ...
css单线边框_css怎么设置table表格的边框为单线边框？（代码详解）
table表格边框怎么设置为单线边框?本篇文章就给大家介绍一种css设置table表格的边框为单线边框的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来看看给tabl ...
html table 转置,jQuery+CSS实现的table表格行列转置功能示例
本文实例讲述了jQuery+CSS实现的table表格行列转置功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: www.ddpool.cn jQuery行列转置 table ...
基于HTTP浏览器缓存机制全面解析看Table表格的css样式代码详解
文章来源: 学习通http://www.bdgxy.com/ 普学网http://www.boxinghulanban.cn/ 智学网http://www.jaxp.net/ 漂亮的table表格样式 ...
html语言中表格由什么组成,html表格基本结构是什么？html表格的完整代码详解
表格在网页制作中用的很多,很多网站都是要求教程有很多大量的表格,表格的使用不仅让数据更加清楚,而且会让表格比较美观.那么html表格基本结构是什么?下面我们对html表格的完整代码进行详解.[推荐阅读 ...
CSS三栏布局的7种方式代码详解 | 圣杯布局 | 双飞翼布局 | 弹性盒子
CSS三栏布局代码详解写在前面:博主最近在转头复习最前面学的CSS,整理一下CSS三栏布局的笔记,正好也捋顺自己的逻辑思路.解析我尽量按照思路详细的写了,代码均可正确运行,留给需要的小伙伴进行参考, ...
jquery将html转为pdf文件,HTML+CSS入门 jsPDF插件实现将HTML页面转换成PDF详解
本篇教程介绍了HTML+CSS入门 jsPDF插件实现将HTML页面转换成PDF详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1.目的:在前段是 jQuery库或 ...

css怎么设置table表格的边框为单线边框？（代码详解）

css怎么设置table表格的边框为单线边框？（代码详解）相关推荐

最新文章

热门文章