html表格隱藏行的方法:1、在表格的tr(行)標簽中,使用style屬性添加“display:none”樣式;2、在表格的tr(行)標簽中,使用style屬性添加“visibility:hidden”樣式。

本教程操作環境: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>
效果圖:

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>
效果圖:

推薦教程:《html視頻教程》
站長資訊網