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; 
}