关于style="visibility: hidden;"和style="display:none"

最新推荐文章于 2022-03-16 18:43:00 发布

原创最新推荐文章于 2022-03-16 18:43:00 发布 · 7.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#border #table #class #css

本文介绍了CSS中两种隐藏元素的方法：使用visibility与display属性的不同之处。visibility设置为hidden会使元素不可见但仍保留其空间，而display设置为none则完全移除元素及其所占空间。文章通过示例展示了这两种方式在表格布局中的应用。

在页面表格处理时，难免会用到隐藏列，style="visibility: hidden;"和style="display:none"都可以，但是有区别的，前一种方法是直接隐藏，但占用的页面空间是不变的。后一种方法直接是不显示，因此不占用的页面空间。区别的时候可以从字面意思。看明白字面意思就不难理解。
<table width="200" border="1" id="data">
<tr>
    <td><span class="STYLE1">sssss</span></td>
    <td> </td>
    <td style="display:none"> </td>
</tr>
<tr>
    <td>aaa</td>
    <td style="color: #FF0000">cccc</td>
    <td style="display:none"> </td>
</tr>
<tr style="color: #FF0000">
    <td>eeeee</td>
    <td>eeeee</td>
    <td style="display:none">eeeee</td>
</tr>
</table>
当然这是CSS样式，不一定用来表格的行或列中，任何页面显示的东西都可以用。