How to hide content in HTML table

Methods to hide content in HTML tables: 1. Set the hidden attribute to table elements tr, th or td, with the syntax "

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

We have the following table:

<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>
	<tr>
		<td>Lois</td>
		<td>20</td>
	</tr>
	<tr>
		<td>Peter</td>
		<td>20</td>
	</tr>
</table>

How to hide the content of the HTML table? Here are several methods to introduce to you.

1. Set the hidden attribute to the table element

<table border="1">
	<tr>
		<th>姓名</th>
		<th>年龄</th>
	</tr>
	<tr hidden="hidden">
		<td>Peter1</td>
		<td>20</td>
	</tr>
	<tr>
		<td>Lois1</td>
		<td hidden="hidden">20</td>
	</tr>
	<tr>
		<td>Peter2</td>
		<td>20</td>
	</tr>
	<tr>
		<td>Lois2</td>
		<td>20</td>
	</tr>
	
</table>

2. Add display: none;Style

<table border="1">
	<tr>
		<th>姓名</th>
		<th>年龄</th>
	</tr>
	<tr>
		<td>Peter1</td>
		<td style="display: none;">20</td>
	</tr>
	<tr style="display: none;">
		<td>Lois1</td>
		<td>20</td>
	</tr>
	<tr>
		<td>Peter2</td>
		<td>20</td>
	</tr>
	<tr>
		<td>Lois2</td>
		<td>20</td>
	</tr>
</table>

Recommended tutorial: "html video tutorial"

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