[DIV/CSS] （CSS） 不同浏览器对table中visibility属性显示的不同

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

一、 html代码

1. <table>
2. <thead>
3. <tr>
4. <th>th</th>
5. <th>th</th>
6. </tr>
7. </thead>
8. <tbody>
9. <tr>http://www.ynmxzx.com/rzjw/20160622/3739.html
10. <td>td</td>
11. <td>td</td>
12. </tr>
13. </tbody>
14. </table>

复制代码

二、不同浏览器的表示

选取了Chrome、FireFox、Edge、IE11分别测试，下文所有图片从左至右顺序均如前所述。

2.1 在border-collapse: collapse;情况下，隐藏thead元素

1. table {
2. border-collapse: collapse;
3. }http://www.ynmxzx.com/rzjw/20160622/3740.html
4. th, td {
5. border: 1px solid black;
6. }
7. thead {
8. visibility: hidden;
9. }http://www.ynmxzx.com/rzjw/20160622/3741.html

复制代码

显示结果如下图：

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

2.2 无border-collapse属性，隐藏thead元素

1. th, td {
2. border: 1px solid black;
3. }
4. thead {
5. visibility: hidden;
6. }http://www.ynmxzx.com/rzjw/20160622/3742.html

复制代码

四者显示结果相同，如下图：

2.3 在border-collapse: collapse;情况下，隐藏th元素

1. table {
2. border-collapse: collapse;
3. }
4. th, td {
5. border: 1px solid black;
6. }http://www.ynmxzx.com/rzjw/20160622/3743.html
7. th {
8. visibility: hidden;
9. }

复制代码

四者显示结果与2.1节相同，如下图：

2.4 无border-collapse属性，隐藏th元素

1. th, td {
2. border: 1px solid black;
3. }http://www.ynmxzx.com/xbzx/20160622/3748.html
4. th {
5. visibility: hidden;
6. }http://www.ynmxzx.com/rzjw/20160622/3744.html

复制代码

四者显示与2.2节相同，如下图：

2.5 在border-collapse: collapse;情况下，隐藏tr元素

1. table {
2. border-collapse: collapse;
3. }
4. th, td {
5. border: 1px solid black;
6. }http://www.ynmxzx.com/xbzx/20160622/3745.html
7. tr {
8. visibility: hidden;
9. }

复制代码

显示结果如下图：

可以看出，Chrome与FrieFox将整个表格隐藏，而Edge与IE11未将边框隐藏。

2.6 无border-collapse属性，隐藏tr

1. th, td {
2. border: 1px solid black;
3. }http://www.ynmxzx.com/xbzx/20160622/3746.html
4. tr {
5. visibility: hidden;
6. }http://www.ynmxzx.com/xbzx/20160622/3747.html

复制代码

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

三、结论

在border-collapse: collapse;情况下，隐藏thead或th，Chrome可将thead部分全部隐藏，而FireFox、Edge与IE11只隐藏了thead部分的文本内容，未隐藏边框。www.ynmxzx.com

无border-collapse属性时，隐藏thead或th，四个浏览器均可以将thead部分全部隐藏。

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

在border-collapse: collapse;情况下，隐藏tr，Chrome与FireFox可将表格全部隐藏，而Edge与IE11只隐藏了表格的文本内容，未隐藏边框。

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

若使不同浏览器显示相同结果，可对th或td设置border: none;。

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