Home > Article > Web Front-end > How to hide rows in html table
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.
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>Rendering:
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>Rendering:
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!