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

    html怎么将表格边框隐藏

    青灯夜游青灯夜游2021-12-10 14:50:31原创3346

    html将表格边框隐藏的方法:1、使用style属性给table、th、td元素添加“border: none;”样式;2、使用style属性给table元素添加“border-color: transparent;”样式。

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

    我们有下面一个表格:

    <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

    怎么将这个表格的边框隐藏起来?下面介绍一下方法:

    1、给table、th、td元素添加border: none;样式

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

    2.png

    2、给table元素添加border-color: transparent;样式

    <table border="1" style="border-color: transparent;">
    	<tr>
    		<th>姓名</th>
    		<th>年龄</th>
    	</tr>
    	<tr>
    		<td>Peter</td>
    		<td>20</td>
    	</tr>
    	<tr>
    		<td>Lois</td>
    		<td>20</td>
    	</tr>
    </table>

    3.png

    推荐教程:《html视频教程

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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:html怎么设置边框颜色 下一篇:html怎么设置粗体
    php培训_php实战培训【立即报名】-php中文网第20期

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• jq怎么去掉html标签• html5有什么特点• html隐藏域是什么• HTML5中nav是什么意思• 网页里段落的html标签是什么
    1/1

    PHP中文网