css--左右visibility建立 “collapse”值问题

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

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

以下让我们看看在表格元素中。collapse是怎么工作的。只是前提是table的border-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有一个非常大的区别；现在，您可以根据自己的需要。做出选择。

转载于:https://www.cnblogs.com/blfshiye/p/4828111.html

css--左右visibility建立 “collapse”值问题相关推荐

[css] 说说visibility属性的collapse属性值有什么作用？在不同浏览器下有什么区别？
[css] 说说visibility属性的collapse属性值有什么作用?在不同浏览器下有什么区别? 设置visibility: collapse后对于普通元素来说跟visibility: hidd ...
CSS中visibility 属性
CSS中visibility 属性一.visibility:visible;详情 visible:visible属性值定义的元素是可见显示的,是默认的属性值. 二.visibility:hidden ...
浅谈对html css的理解,HTML+CSS入门 CSS选择器、属性和值浅谈
body { font-size: 0.8em; color: navy; } 上面的意思是为body选择器设置font-size字体大小和color字体颜色. 所以基本的,当它作用与HTML页面时, ...
[css] position跟margin collapse这些特性相互叠加后会怎么样？
[css] position跟margin collapse这些特性相互叠加后会怎么样? 怎样防止外边距重叠?底部元素脱离文档流(float: left/right || position: abso ...
[css] 举例说明clear取值有哪些？
[css] 举例说明clear取值有哪些? none 默认值.允许浮动元素出现在两侧.left 在左侧不允许浮动元素.right 在右侧不允许浮动元素.both 在左右两侧均不允许浮动元素.inher ...
CSS实现bootstrap的Collapse动态折叠和展开时箭头图标
CSS实现bootstrap的Collapse动态折叠和展开时箭头图标 bootstrap的折叠代码如下 <div class="accordion" id="ac ...
CSS常见属性和属性值
1.1 CSS 长度和颜色设置三种长度单位: px em % 三种颜色设置方式: 颜色名 rgb() 十六进制 1.2 CSS 选择器标签名选择器类名选择器 ID名选择器全局选择器行内式 &g ...
CSS的继承、权值与层叠
2019独角兽企业重金招聘Python工程师标准>>> 笔者最近在细细学习前端方面的基础知识.以前对CSS布局的各式"花样"总是摸不着头脑,可以接受的就是abso ...
CSS中属性个属性值怎么区分,[CSS] 详细解释 @media 属性与 (max
前言现在 HTML5/CSS3 很流行罢,也是未来时代的趋势.在 HTML5 带来的许多实用功能之后,CSS3也同带来了一些牛逼哄哄的功能呢. 动画 animation 转化 transform 过 ...

css--左右visibility建立 “collapse”值问题

css--左右visibility建立 “collapse”值问题相关推荐

最新文章

热门文章