html中visibility属性,（CSS） 不同浏览器对table中visibility属性显示的不同
本文舉例說明在不同瀏覽器對table中visibility屬性顯示的不同。
一、HTML代碼
thth
tdtd二、不同瀏覽器的表示
選取了Chrome、FireFox、Edge、IE11分別測試，下文所有圖片從左至右順序均如前所述。
2.1 在border-collapse: collapse;情況下，隱藏thead元素
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}
thead {
visibility: hidden;
}
顯示結(jié)果如下圖：
可以看出，Chrome把邊框隱藏了，但另外三者只隱藏了內(nèi)容，未隱藏邊框。
2.2 無border-collapse屬性，隱藏thead元素
th, td {
border: 1px solid black;
}
thead {
visibility: hidden;
}
四者顯示結(jié)果相同，如下圖：
2.3 在border-collapse: collapse;情況下，隱藏th元素
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}
th {
visibility: hidden;
}
四者顯示結(jié)果與2.1節(jié)相同，如下圖：
2.4 無border-collapse屬性，隱藏th元素
th, td {
border: 1px solid black;
}
th {
visibility: hidden;
}
四者顯示與2.2節(jié)相同，如下圖：
2.5 在border-collapse: collapse;情況下，隱藏tr元素
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}
tr {
visibility: hidden;
}
顯示結(jié)果如下圖：
可以看出，Chrome與FrieFox將整個表格隱藏，而Edge與IE11未將邊框隱藏。
2.6 無border-collapse屬性，隱藏tr
th, td {
border: 1px solid black;
}
tr {
visibility: hidden;
}
四者顯示結(jié)果相同，均將表格全部隱藏
三、結(jié)論
在border-collapse: collapse;情況下，隱藏thead或th，Chrome可將thead部分全部隱藏，而FireFox、Edge與IE11只隱藏了thead部分的文本內(nèi)容，未隱藏邊框。
無border-collapse屬性時，隱藏thead或th，四個瀏覽器均可以將thead部分全部隱藏。
上述兩個結(jié)果也適用于tbody相關(guān)元素。
在border-collapse: collapse;情況下，隱藏tr，Chrome與FireFox可將表格全部隱藏，而Edge與IE11只隱藏了表格的文本內(nèi)容，未隱藏邊框。
無border-collapse屬性時，隱藏tr，四個瀏覽器均可以將表格全部隱藏。
若使不同瀏覽器顯示相同結(jié)果，可對th或td設(shè)置border: none;。
我并沒有找到產(chǎn)生上述結(jié)果的原因，只能認(rèn)為是不同瀏覽器處理結(jié)果的不同。W3school上說若不規(guī)定!DOCTYPE，border-collaspe可能產(chǎn)生意想不到的結(jié)果，上述測試均有規(guī)定!DOCTYPE。
總結(jié)
以上是生活随笔為你收集整理的html中visibility属性,（CSS） 不同浏览器对table中visibility属性显示的不同的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python3入门指南_Python 3
- 下一篇： 奥运五环-web前端