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爱好者其它相关文章!
-
U盘装系统时开机按ESC后找不到u盘怎么办?(u盘做系统开机) 2025-06-28
-
Win8系统快速进入PE的方法(win8快速启动怎么开启) 2025-06-28
-
Pi Network不需要币安 - 社区发声 2025-06-28
-
winpe系统安装 如何把winpe系统安装在隐藏分区(winpe装机) 2025-06-28
-
美股期货创历史新高——比特币会是下一个爆发的吗? 2025-06-28
-
教你pe系统bootice修复系统引导教程(booting win pe) 2025-06-28