How to hide html table rows

Methods to hide table rows: 1. Use the hidden attribute in the tr tag, with the syntax "

"; 2. Use the style attribute in the tr tag and add "display: none" style, syntax " ".

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

How to hide table rows in html

Method 1: Use the hidden attribute in the tr tag

<table border="1">
	<tr>
		<th>商品</th>
		<th>价格</th>
	</tr>
	<tr hidden="hidden">
		<td>T恤</td>
		<td>￥100</td>
	</tr>
	<tr>
		<td>牛仔褂</td>
		<td>￥250</td>
	</tr>
	<tr>
		<td>牛仔库</td>
		<td>￥150</td>
	</tr>
</table>

Rendering:

Method 2: Use the style attribute in the tr tag and add the "display: none;" style

<table border="1">
	<tr>
		<th>商品</th>
		<th>价格</th>
	</tr>
	<tr>
		<td>T恤</td>
		<td>￥100</td>
	</tr>
	<tr style="display: none;">
		<td>牛仔褂</td>
		<td>￥250</td>
	</tr>
	<tr>
		<td>牛仔库</td>
		<td>￥150</td>
	</tr>
</table>

Rendering:

Recommended tutorials: html video tutorial, css video tutorial

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