html表格怎么隐藏行
时间:2021-05-22 来源:互联网
今天PHP爱好者为您带来html表格隐藏行的方法:1、在表格的tr(行)标签中,使用style属性添加“display:none”样式;2、在表格的tr(行)标签中,使用style属性添加“visibility:hidden”样式。希望对大家有所帮助。
html表格怎么隐藏行
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
1、tr(行)标签设置“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>价格</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(行)标签设置“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>价格</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表格怎么隐藏行的详细内容,更多请关注php爱好者其它相关文章!
-
坦克世界BDRG1B配件选择指南_坦克世界BDRG1B配件选择推荐 2025-06-08
-
-
龙魂旅人开服必看攻略_龙魂旅人新手开荒攻略(龙魂攻略哔哩哔哩) 2025-06-08
-
-
-
家里WiFi断了,我和我爸开始对话了 2025-06-08