CSS隱藏表格並顯示tr

Question

我想在加載時隱藏一個表，並根據類名顯示其子級td。 CSS可以做到嗎？

我嘗試這樣做，但是我認為它是從display：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>

演示

---

更新

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

演示

hasClass()函數

Answer 2

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

您想隱藏所有<tr> ，僅按類顯示

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

Answer 3

您不能顯示孩子並隱藏父母 。.這是不可能的。

而是隱藏所有不想顯示的td 。