• 技术文章 >web前端 >css教程

    css怎么去除表格边框

    青灯夜游青灯夜游2021-10-12 15:55:32原创104

    去除方法:1、给table、th、td元素添加“border:0;”样式;2、给table、th、td元素添加“border-style:none;”样式;3、给table、th、td元素添加“border:transparent;”样式。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    这里有一个HTML文档,有一个表格

    <table border="1">
    	<tr>
    		<th>姓名</th>
    		<th>年龄</th>
    	</tr>
    	<tr>
    		<td>Peter</td>
    		<td>20</td>
    	</tr>
    	<tr>
    		<td>Lois</td>
    		<td>20</td>
    	</tr>
    </table>

    1.png

    可以看出table有边框,那么如果要想去除表格边框,要怎么做?下面介绍几种方法。

    方法1:给table、th、td元素添加border: 0;样式

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    <style>
    	table,th,td {
    		border: 0;
    	}
    </style>
    	</head>
    	<body>
    		<table border="1">
    			<tr>
    				<th>姓名</th>
    				<th>年龄</th>
    			</tr>
    			<tr>
    				<td>Peter</td>
    				<td>20</td>
    			</tr>
    			<tr>
    				<td>Lois</td>
    				<td>20</td>
    			</tr>
    		</table>
    	</body>
    </html>

    效果图:

    2.png

    方法2:给table、th、td元素添加border-style: none;样式

    <style>
    	table,th,td {
    		border-style: none;
    	}
    </style>

    3.png

    方法3:给table、th、td元素添加border: transparent;样式

    <style>
    	table,th,td {
    		border: transparent;
    	}
    </style>

    4.png

    (学习视频分享:css视频教程

    以上就是css怎么去除表格边框的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css table 边框
    上一篇:怎么看网页css 下一篇:css的盒模型有几种
    大前端线上培训班

    相关文章推荐

    • css怎么修改字体颜色• css怎么设置超出显示省略号• css怎么实现三角形• css如何设置边框圆角• css要如何清除浮动

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网