CSS隱藏表格並顯示tr

Question

我想隱藏加載的表格並根據類名稱顯示其子項td中的一個。 是否可以用CSS來做到這一點？

我試圖做到這一點，但我認爲它從隱藏在顯示器中的表繼承：none;

Answer 1

您不能顯示隱藏父項的子項。

但是，您可以隱藏所有其他<td> -s並只顯示您需要的一個。

<style> 
td { display: none } 
td.shown { display: table-cell } 
</style> 

<table> 
    <tr> 
     <td> hidden </td> 
     <td> hidden </td> 
    </tr> 
    <tr> 
     <td class="shown"> shown </td> 
     <td> hidden </td> 
    </tr> 
    <tr> 
     <td> hidden </td> 
     <td> hidden </td> 
    </tr> 
</table> 

DEMO

---

UPDATE

使用JavaScript

var tds = document.getElementsByTagName("td"); 

for (var i = 0, size = tds.length; i < size; i++) { 
    if (!hasClass(tds[i], "shown")) { 
     tds[i].style.display = "none"; 
    } 
} 

function hasClass(element, cls) { 
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; 
} 

DEMO

hasClass()功能

Answer 2

不能顯示孩子和隱藏父 ..這是不可能的。

而是隱藏所有TD的你不希望顯示..

Answer 3

如果隱藏了表，所有表中的內容將被隱藏。

你想隱藏的所有<tr>秒和每類只顯示

tr{ 
    display:none; 
} 
tr.showInit{ 
    display:table-row; 
}