html表格怎么隐藏行

ID:9661 / 打印
html表格隐藏行的方法:1、在表格的tr(行)标签中,使用style属性添加“display:none”样式;2、在表格的tr(行)标签中,使用style属性添加“visibility:hidden”样式。

html表格怎么隐藏行

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

1、tr(行)标签设置“display:none”样式

<!DOCTYPE html> <html>  	<head> 		<meta charset="utf-8"> 		<style type="text/css"> 			table { 				border-collapse: collapse; 			} 			td { 				border: 1px solid red; 			} 		</style> 	</head>  	<body> 		<table> 			<tr> 				<td>商品</td> 				<td>价格</td> 			</tr> 			<tr style="display: none;"> 				<td>T恤</td> 				<td>¥100</td> 			</tr> 			<tr> 				<td>牛仔褂</td> 				<td>¥250</td> 			</tr> 			<tr> 				<td>牛仔库</td> 				<td>¥150</td> 			</tr> 		</table> 	</body>  </html>

效果图:

1.png

立即学习“前端免费学习笔记(深入)”;

2、tr(行)标签设置“visibility:hidden”样式

<!DOCTYPE html> <html>  	<head> 		<meta charset="utf-8"> 		<style type="text/css"> 			table { 				border-collapse: collapse; 			} 			td { 				border: 1px solid red; 			} 		</style> 	</head>  	<body> 		<table> 			<tr> 				<td>商品</td> 				<td>价格</td> 			</tr> 			<tr style="visibility:hidden;"> 				<td>T恤</td> 				<td>¥100</td> 			</tr> 			<tr> 				<td>牛仔褂</td> 				<td>¥250</td> 			</tr> 			<tr> 				<td>牛仔库</td> 				<td>¥150</td> 			</tr> 		</table> 	</body>  </html>

效果图:

2.png

推荐教程:《html视频教程》

上一篇: html怎么禁止页面放大缩小
下一篇: html文本框怎么设置只读

作者:admin @ 24资源网   2024-09-27

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。