html表格隱藏行的方法:1、在表格的tr(行)標(biāo)簽中,使用style屬性添加“display:none”樣式;2、在表格的tr(行)標(biāo)簽中,使用style屬性添加“visibility:hidden”樣式。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
1、tr(行)標(biāo)簽設(shè)置“display:none”樣式
<!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>價(jià)格</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>
效果圖:
2、tr(行)標(biāo)簽設(shè)置“visibility:hidden”樣式
<!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>價(jià)格</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>
效果圖:
推薦教程:《html視頻教程》