How to hide rows in html table-HTML Tutorial-php.cn

How to hide rows in html table

青灯夜游

Release： 2023-01-06 11:13:13

Original

6824 people have browsed it

How to hide rows in html tables: 1. In the tr (row) tag of the table, use the style attribute to add the "display:none" style; 2. In the tr (row) tag of the table, use style Add "visibility:hidden" style to the attribute.

How to hide rows in html table

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

1. Set the "display:none" style for the tr (row) tag

<!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>

Copy after login

Rendering:

How to hide rows in html table

2. Set the "visibility:hidden" style for the tr (row) tag

<!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>

Copy after login

Rendering:

How to hide rows in html table

Recommended tutorial: " html video tutorial》

The above is the detailed content of How to hide rows in html table. For more information, please follow other related articles on the PHP Chinese website!