[DIV/CSS] (CSS) 不同瀏覽器對table中visibility屬性顯示的不同
阿新 • • 發佈:2019-01-25
本文舉例說明在不同瀏覽器對table中visibility屬性顯示的不同。
一、html程式碼- <table>
- <thead>
- <tr>
- <th>th</th>
- <th>th</th>
- </tr>
- </thead>
- <tbody>
- <tr>http://www.ynmxzx.com/rzjw/20160622/3739.html
- <td>td</td>
- <td>td</td>
- </tr>
- </tbody>
- </table>
選取了Chrome、FireFox、Edge、IE11分別測試,下文所有圖片從左至右順序均如前所述。
2.1 在border-collapse: collapse;情況下,隱藏thead元素- table {
- border-collapse: collapse;
- }http://www.ynmxzx.com/rzjw/20160622/3740.html
- th, td {
- border: 1px solid black;
- }
- thead {
- visibility: hidden;
- }http://www.ynmxzx.com/rzjw/20160622/3741.html
顯示結果如下圖:
可以看出,Chrome把邊框隱藏了,但另外三者只隱藏了內容,未隱藏邊框。
2.2 無border-collapse屬性,隱藏thead元素- th, td {
- border: 1px solid black;
- }
- thead {
- visibility: hidden;
- }http://www.ynmxzx.com/rzjw/20160622/3742.html
四者顯示結果相同,如下圖:
2.3 在border-collapse: collapse;情況下,隱藏th元素
- table {
- border-collapse: collapse;
- }
- th, td {
- border: 1px solid black;
- }http://www.ynmxzx.com/rzjw/20160622/3743.html
- th {
- visibility: hidden;
- }
四者顯示結果與2.1節相同,如下圖:
2.4 無border-collapse屬性,隱藏th元素
- th, td {
- border: 1px solid black;
- }http://www.ynmxzx.com/xbzx/20160622/3748.html
- th {
- visibility: hidden;
- }http://www.ynmxzx.com/rzjw/20160622/3744.html
四者顯示與2.2節相同,如下圖:
2.5 在border-collapse: collapse;情況下,隱藏tr元素
- table {
- border-collapse: collapse;
- }
- th, td {
- border: 1px solid black;
- }http://www.ynmxzx.com/xbzx/20160622/3745.html
- tr {
- visibility: hidden;
- }
顯示結果如下圖:
可以看出,Chrome與FrieFox將整個表格隱藏,而Edge與IE11未將邊框隱藏。
2.6 無border-collapse屬性,隱藏tr- th, td {
- border: 1px solid black;
- }http://www.ynmxzx.com/xbzx/20160622/3746.html
- tr {
- visibility: hidden;
- }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。