1、您可能已使用visibility一千次,最常用的是visiblehidden。它用来显示或隐藏元素。

有第三很少已使用的值它是collapse,在表格的行,列中使用有差异外,他和hidden的作用是等同的。

以下让我们看看在表格元素中。collapse是怎么工作的。只是前提是tableborder-collapse须要设定成separate才会有效果哦!

以下直接上demo:

当中主要()代码例如以下:

<table cellspacing="0" class="table">
<tr>
<th>Fruits</th>
<th>Vegetables</th>
<th>Rocks</th>
</tr>
<tr>
<td>Apple</td>
<td>Celery</td>
<td>Granite</td>
</tr>
<tr>
<td>Orange</td>
<td>Cabbage</td>
<td>Flint</td>
</tr>
</table>

2.js文件例如以下:

var btns = document.getElementsByTagName('button'),
rows = document.getElementsByTagName('tr'); btns[0].addEventListener('click', function () {
rows[1].className = 'vc';
}, false); btns[1].addEventListener('click', function () {
rows[1].className = 'vh';
}, false); btns[2].addEventListener('click', function () {
rows[1].className = '';
}, false);

3、css文件例如以下:

body {
text-align: center;
padding-top: 20px;
font-family: Arial, sans-serif;
} table {
border-collapse: separate;
border-spacing: 5px;
border: solid 1px black;
width: 500px;
margin: 0 auto;
} th, td {
text-align: center;
border: solid 1px black;
padding: 10px;
} .vc {
visibility: collapse;
} .vh {
visibility: hidden;
} button {
margin-top: 5px;
}

默认的输出为:

当点击COLLAPSE ROW1 时。显演示样例如以下:

当点击HIDE ROW1,显演示样例如以下:

尽管collapse有hidden的特性,可是表现的形式却与hidden有一个非常大的区别;现在,您可以根据自己的需要。做出选择。

版权声明:本文博主原创文章,博客,未经同意不得转载。

css--左右visibility建立 “collapse”值问题的更多相关文章

  1. CSS 隐藏 visibility 属性

    定义和用法 visibility 属性规定元素是否可见. 提示:即使不可见的元素也会占据页面上的空间.请使用 "display" 属性来创建不占据页面空间的不可见元素. 说明 这个 ...

  2. CSS:opacity 的取值范围是 0~1

    CSS:opacity 的取值范围是 0~1,难怪设置为 1~100 看不到效果.

  3. python+selenium:解决上传文件<input type='file'>标签属性被css的visibility隐藏导致无法定位元素的问题

    要想上传文件,需要找到在HTML中<input type="file" />这个标签,有它就可以利用send_keys上传文件,不过这里的<input>元素 ...

  4. Django学习笔记(二):使用Template让HTML、CSS参与网页建立

    Django学习笔记(二):使用Template让HTML.CSS参与网页建立 通过本文章实现: 了解Django中Template的使用 让HTML.CSS等参与网页建立 利用静态文件应用网页样式 ...

  5. 巧用CSS属性visibility与opacity代替鼠标经过的jQuery事件

    一直使用jQuery的hover()函数来写鼠标经过事件,这几天发现其他同行直接使用CSS就搞定了.自己在线下也试了试: 当然也并不是没有前提条件,需要配合一些定位属性来使用(position/top ...

  6. css的五种属性值----在路上(21)

    在CSS中,每个属性的属性值都有一定的范围,并且不同类型的属性值有不同的值.对于一个属性,必须取得正确的属性值,才能被浏览器正确地解释,因此一定要弄清每种类型的属性值范围.在CSS中属性一般有以下几种 ...

  7. css中的position属性值的探究

    css的position属性指定了元素的定位类型,然后通过top,botton,left,right来具体定位. 在具体定位之前必须使用position属性,否则所有的具体定位属性都无法生效. pos ...

  8. CSS中vertical-align的默认值baseline的理解

    写在前面的话 在学校业余学习了一个月的CSS,人生中第一篇博客就献给CSS了,欢迎大家指正文章中不正确的地方,在此感谢.在尝试开始写博客的时候查了好多资料,原本以为写自己熟悉的知识的博客很容易,没想到 ...

  9. js 获取手机浏览器类型,修改css文件的class的值

    /*========================================= 函数功能:获取浏览器类型 =========================================*/ ...

随机推荐

  1. Linux Shell脚本编程--curl命令详解

    用途说明 curl命令是一个功能强大的网络工具,它能够通过http.ftp等方式下载文件,也能够上传文件.其实curl远不止前面所说的那些功能,大家可以通过man curl阅读手册页获取更多的信息.类 ...

  2. Hibernate学习之createSQLQuery与createQuery的区别及使用

    hibernate中createQuery与createSQLQuery:前者用的hql语句进行查询,后者可以用sql语句查询,前者以hibernate生成的Bean为对象装入list返回,后者则是以 ...

  3. Android开发 - ActivityLifecycleCallbacks用法初探

    ActivityLifecycleCallbacks是什么? Application通过此接口提供了一套回调方法,用于让开发人员对Activity的生命周期事件进行集中处理. 为什么用Activity ...

  4. redis的分布式解决方式--codis (转)

    codis是豌豆荚开源的分布式server.眼下处于稳定阶段. 原文地址:https://github.com/wandoulabs/codis/blob/master/doc/tutorial_zh ...

  5. 一个简单的HTTP服务器(多线程)

    为了更好的了解HTTP协议, 特意谢了一个简单HTTP服务器, 代码只有400行. 因为很简单, 所以效率也不怎么高, 而且支持的特性也不多, 不过也可以运行, 性能跟Apache差不多. ===== ...

  6. Java集合类汇总记录-- apache.commons4(TreeList)

    通常.Tree是Tree,List是List,两者不太可能混在一起.但apache-commons库却用tree实现了实现了List的接口,也就是TreeList类.与标准的LinkedList相比. ...

  7. zabbix 监控特定进程

    因为一些server上跑着一些重要程序,须要对它们进行监控,公司用的是zabbix监控,之前都是在zabbix中加入自己定义脚本对特定程序进行监控,近期看了zabbix的官方文档,发现原来强大的zab ...

  8. 神经网络BP算法C和python代码

    上面只显示代码. 详BP原理和神经网络的相关知识,请参阅:神经网络和反向传播算法推导 首先是前向传播的计算: 输入: 首先为正整数 n.m.p.t,分别代表特征个数.训练样本个数.隐藏层神经元个数.输 ...

  9. Node.js v0.10.31API手冊-控制台

    Node.js v0.10.31API手冊-文件夹 控制台 Object 用于向 stdout 和 stderr 打印字符.类似于大部分 Web 浏览器提供的 console 对象函数,在这里则是输出 ...

  10. BZOJ 1975 SDOI2010 魔法猪学院 A*k短路

    题目大意:给定一个值E 求起点到终点的最多条路径 使长度之和不超过E k短路的A*算法--每一个点有一个估价函数=g[x]+h[x] 当中g[x]是从源点出发已经走了的长度 h[x]是从这个点到汇点的 ...