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!