重新认识visibility 原

原先只是记住了display:none不点位,visibility:hidden要占位显示。

今天看到table中,列样式支持四个css的表格样式之外的属性:border width background visibility。 言外之意就是就像给表格的<tr>上加样式控制整行一样, 给表格的<col>标签可以添加上面四个属性,在col上增加样式控制整列样式。但要记住优先级是:cell ->row ->col ->table。

visibility 的4个可选值: visible, hidden, collapse, and inherit。 下面是我总结的:

普通元素

表格<col>元素

visible

显示占位

无效!正常显示

hidden

隐藏点位

无效!正常显示

collapse

同hidden

隐藏。合并格会剪切

inherit

默认,未研究

未研究

测试:

1、div和table元素设置collapse时,在edge中,完全隐藏的! 2、表格的col元素设置collapse时,该列隐藏,表宽度自动减少。 对于如果该列有横向合并 单元格,合并格宽度自动减少, 但“内容不会自动再布局,而是直接剪去相应宽度。clipped!"

什么意思呢? 假如是合并格原先是居中的,collapse其中的某一列后,合并格像从右边直接剪去列宽度,就是文字不再重排,不会居中,文字如果长的话,直接会tgtg截断!

3、col元素设置display:none。个人理解,它不去影响表格的列样式,只是让自身的col标签没有。

什么意思呢?假如一组col标签控制表格每个列宽度,如果设置其中一个col为display:none时,并不会让相应列隐藏,而只是让当前的col标签失效,从而后面的col影响

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Web项目聚集地

CSS布局解决方案(居中布局)

前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局...

11820
来自专栏从零开始学 Web 前端

div盒子水平垂直居中方法

这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用。内容块定义transform: translate(-50%,-50%)  必须加上

21930
来自专栏编程直播室

Canvas的HelloWorld文本的样式文本的测量总结

27160
来自专栏阮一峰的网络日志

Flexbox 布局的最简单表单

弹性布局(Flexbox)逐渐流行,越来越多人使用,因为它写 CSS 布局真是太方便了。

11020
来自专栏Flutter入门

Android OpenGL ES(八) - 简单实现绿幕抠图

这里的关键是,判断颜色的范围。这里简单的认定 g>140.0 && r<128.0 && b<128.0 时为绿色。当是绿色的时候,就将其颜色换成白色。同时al...

37120
来自专栏郭霖

Android视图绘制流程完全解析,带你一步步深入了解View(二)

在上一篇文章中,我带着大家一起剖析了一下LayoutInflater的工作原理,可以算是对View进行深入了解的第一步吧。那么本篇文章中,我们将继续对View进...

37380
来自专栏肖洒的博客

前端入门学习--CSS

样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 ...

22420
来自专栏ytkah

marquee一行代码实现滚动跑马灯效果无需js

  最近ytkah决定拓展一下业务,贴补一些家用,~(@^_^@)~,将以前做的网站建设案例展现出来,有这方面需求的朋友可以扫一下二维码加我哈,或者推荐朋友给我...

1K50
来自专栏分享达人秀

TextView属性和方法大全

前面简单学习了一些Android UI的一些基础知识,那么接下来我们一起来详细学习Android的UI界面基本组件。 一、认识TextView 我们知道前面学习...

27450
来自专栏转载gongluck的CSDN博客

vc中实现控件的隐藏与显示

一、隐藏控件             CWnd *pWnd;         pWnd = GetDlgItem(IDC_EDIT1);        //获...

37450

扫码关注云+社区

领取腾讯云代金券