资讯专栏INFORMATION COLUMN

(CSS) 不同浏览器对table中visibility属性显示的不同

Lsnsh / 1627人阅读

摘要:本文举例说明在不同浏览器对中属性显示的不同。一代码二不同浏览器的表示选取了分别测试,下文所有图片从左至右顺序均如前所述。若使不同浏览器显示相同结果,可对或设置。我并没有找到产生上述结果的原因,只能认为是不同浏览器处理结果的不同。

本文举例说明在不同浏览器对tablevisibility属性显示的不同。

一、HTML代码
th th
td td
二、不同浏览器的表示

选取了ChromeFireFoxEdgeIE11分别测试,下文所有图片从左至右顺序均如前所述。

2.1 在border-collapse: collapse;情况下,隐藏thead元素
table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
}
thead {
  visibility: hidden;
}

显示结果如下图:

可以看出,Chrome把边框隐藏了,但另外三者只隐藏了内容,未隐藏边框。

2.2 无border-collapse属性,隐藏thead元素
th, td {
  border: 1px solid black;
}
thead {
  visibility: hidden;
}

四者显示结果相同,如下图:

2.3 在border-collapse: collapse;情况下,隐藏th元素
table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
}
th {
  visibility: hidden;
}

四者显示结果与2.1节相同,如下图:

2.4 无border-collapse属性,隐藏th元素
th, td {
  border: 1px solid black;
}
th {
  visibility: hidden;
}

四者显示与2.2节相同,如下图:

2.5 在border-collapse: collapse;情况下,隐藏tr元素
table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
}
tr {
  visibility: hidden;
}

显示结果如下图:

可以看出,ChromeFrieFox将整个表格隐藏,而EdgeIE11未将边框隐藏。

2.6 无border-collapse属性,隐藏tr
th, td {
  border: 1px solid black;
}
tr {
  visibility: hidden;
}

四者显示结果相同,均将表格全部隐藏

三、结论

border-collapse: collapse;情况下,隐藏theadthChrome可将thead部分全部隐藏,而FireFoxEdgeIE11只隐藏了thead部分的文本内容,未隐藏边框。

border-collapse属性时,隐藏theadth,四个浏览器均可以将thead部分全部隐藏。

上述两个结果也适用于tbody相关元素。

border-collapse: collapse;情况下,隐藏trChromeFireFox可将表格全部隐藏,而EdgeIE11只隐藏了表格的文本内容,未隐藏边框。

border-collapse属性时,隐藏tr,四个浏览器均可以将表格全部隐藏。

若使不同浏览器显示相同结果,可对thtd设置border: none;

我并没有找到产生上述结果的原因,只能认为是不同浏览器处理结果的不同。W3school上说若不规定!DOCTYPEborder-collaspe可能产生意想不到的结果,上述测试均有规定!DOCTYPE

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/115282.html

相关文章

  • CSS

    摘要:在元素之后添加内容控制表单控件的禁用状态。生成相对定位的元素,相对于其正常位置进行定位。双冒号是在当前规范中引入的,用于区分伪类和伪元素。 1.介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? 有两种, IE 盒子模型、W3C 盒子模型; 盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border);区  别: IE的cont...

    Lyux 评论0 收藏0
  • 知识整理之CSS

    摘要:如对知识点感兴趣,可移步至知识整理之篇就是针对不同的浏览器或不同版本浏览器写特定的样式达到让浏览器兼容的过程。对于伪元素的定义伪元素在中创建了一些抽象元素,这些对象不存在与常文档流中。隐藏元素的几种方法该属性隐藏元素,单元素在文档流中仍占据 CSS篇主要从CSS兼容、CSS3新特性、CSS选择器、高频属性、高频布局、高频知识点、性能优化等方面进行归纳。如对HTML知识点感兴趣,可移步至...

    ermaoL 评论0 收藏0
  • css基础知识整理篇

    摘要:折叠后的计算参与折叠的都是正值在都是正数的情况下,取其中较大的值为最终值。参与折叠的中有正值,有负值有正有负,先取出负中绝对值中最大的,然后,和正值中最大的相加。单冒号用于伪类,双冒号用于伪元素。 转自某个大神整理的面试题 盒子模型 标准盒子模型 内容(content)+ 填充(padding)+ 边界(margin)+ 边框(border); 低版本IE盒子模型 content部分把...

    QiShare 评论0 收藏0
  • 前端常见知识点汇总(面试)-HTML和CSS部分

    摘要:一内联元素与行元素的区别内联元素即行内元素。绝对定位,相对于定位以外的第一个父元素进行定位,元素脱离文档流。 一、内联元素与行元素的区别 1、内联元素即行内元素。2、内联元素,在文档流中挤在一行;不能设置宽高(即,即使设置了也不管用,例如a标签)、margin和padding的top和bottom 块元素,独占一行;可以设置宽高、margin、padding3、可以使用displa...

    DevTTL 评论0 收藏0
  • 前端常见知识点汇总(面试)-HTML和CSS部分

    摘要:一内联元素与行元素的区别内联元素即行内元素。绝对定位,相对于定位以外的第一个父元素进行定位,元素脱离文档流。 一、内联元素与行元素的区别 1、内联元素即行内元素。2、内联元素,在文档流中挤在一行;不能设置宽高(即,即使设置了也不管用,例如a标签)、margin和padding的top和bottom 块元素,独占一行;可以设置宽高、margin、padding3、可以使用displa...

    wuyangnju 评论0 收藏0

发表评论

0条评论

Lsnsh

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<