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

kimi013

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

一、HTML代码

<table>
  <thead>
    <tr>
      <th>th</th>
      <th>th</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>td</td>
      <td>td</td>
    </tr>
  </tbody>
</table>

二、不同浏览器的表示

选取了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

阅读 3.6k

247 声望
10 粉丝
0 条评论
247 声望
10 粉丝
文章目录
宣传栏