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;
}
顯示結果如下圖：
可以看出，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;
}
顯示結果如下圖：
可以看出，Chrome與FrieFox將整個表格隱藏，而Edge與IE11未將邊框隱藏。
2.6 無border-collapse屬性，隱藏tr
th, td {
border: 1px solid black;
}
tr {
visibility: hidden;
}
四者顯示結果相同，均將表格全部隱藏
三、結論
在border-collapse: collapse;情況下，隱藏thead或th，Chrome可將thead部分全部隱藏，而FireFox、Edge與IE11只隱藏了thead部分的文本內容，未隱藏邊框。
無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。
總結
以上是生活随笔為你收集整理的html中visibility属性,（CSS） 不同浏览器对table中visibility属性显示的不同的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python3入门指南_Python 3
- 下一篇： 奥运五环-web前端