style="visibility: hidden;"和style="display:none"分析

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

转载最新推荐文章于 2022-03-16 18:43:00 发布 · 383 阅读

本文介绍了在网页设计中使用CSS来隐藏表格列的两种方法：使用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样式，不一定用来表格的行或列中，任何页面显示的东西都可以用。