css如何隱藏行元素
- WBOY原創
- 2021-11-24 11:11:482822瀏覽
css隱藏行元素的方法：1、利用display屬性，只需要為行元素添加「display:none」樣式即可；2、利用visibility屬性，只需為行元素新增「visibility:hidden ”樣式即可。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
css怎麼隱藏行元素
1、在css中我們可以透過將display屬性設為none，實現元素隱藏的效果。想要隱藏行元素，只需要為這個行元素加上一個「display:none」樣式。
下面我們透過範例來看怎樣去隱藏行元素，範例如下：
新建一個html文件，命名為test.html，用於講解css如何隱藏表格其中一行。使用table標籤建立一個三行兩列的表格。設定第二行的id屬性為mytarget，下面使用css將它隱藏。
在css標籤內，透過table設定表格的寬度為280px，高度為180px。
2、在css標籤內，透過id設定表格第二行的樣式，將display屬性設為none，實作將它隱藏。
在瀏覽器中開啟test.html文件，查看實現的效果。
總結：
使用table標籤建立一個三行兩列的表格。
設定第二行的id屬性為mytarget，下面使用css將它隱藏。
在css標籤內，透過table設定表格的寬度為280px，高度為180px。
在css標籤內，透過id設定表格第二行的樣式，將display屬性設為none，實作將它隱藏。
2、在css中也可以使用visibility 屬性是行元素隱藏，visibility 屬性規定元素是否可見。
只需為行元素新增「visibility:hidden」樣式即可，範例如下：
<html>
<style type="text/css">
#hang{visibility:hidden}
</style>
<body>
<table border="1">
<tr id="hang">
<th>1111</th>
<th>2222</th>
</tr>
<tr>
<td>3333</td>
<td>4444</td>
</tr>
</table>
</body>
</html>輸出結果：
css影片教學）
以上是css如何隱藏行元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！