HTML Tabellenzeilen ausblenden

Question

Also versuche ich eine inkrementierende Zahl zur ersten Zelle einer HTML-Tabelle hinzuzufügen. Was ich mit Beispielen in diesem Forum gemacht habe. Was ich als nächstes tun möchte, ist eine Zeile auszublenden, die nur die Nummer in der ersten Zelle enthält. Die einzige wirkliche Option, die ich zur Verfügung habe, ist CSS, aber ich bin mir nicht sicher, ob es möglich ist. Der Code, den ich bisher habe, ist

table { 
 
    border-collapse: collapse; 
 
    counter-reset: rowNumber; 
 
} 
 
table tr:not(:first-child) { 
 
    counter-increment: rowNumber; 
 
} 
 
table td > *:empty { 
 
    display: none; 
 
} 
 
tr > td:empty { 
 
    background-color: yellow; 
 
} 
 
table tr td:first-child::before { 
 
    content: counter(rowNumber); 
 
    min-width: 1em; 
 
    margin-right: 0.5em; 
 
}

<table border="1px" empty-cells:hide;> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td>Test</td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td>Test</td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td>Test</td> 
 
    </tr> 
 
</table>

Answer 1

bitte unter Schnipsel überprüfen erfüllt Ihre Anforderung.

http://bootsnipp.com/user/snippets/D2ZDA

Hier versteckt ich alle Elemente Geschwister TR, wenn die erste TR leer ist. Mit CSS können Sie übergeordnete Elemente nicht steuern, da keine übergeordneten Selektoren vorhanden sind. Hier

ist der Code -

table { 
 
    border-collapse: collapse; 
 
} 
 
table tr:not(:first-child) { 
 
    counter-increment: rowNumber; 
 
} 
 
tr > td:first-child:empty, 
 
tr > td:first-child:empty ~ td { 
 
    display: none; 
 
} 
 
table tr td:first-child::before { 
 
    content: counter(rowNumber); 
 
    min-width: 1em; 
 
    margin-right: 0.5em; 
 
}

<table border="1px" empty-cells:hide;> 
 
    <tr> 
 
    <td>Has Text</td> 
 
    <td>Test</td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td>Test</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Has Text</td> 
 
    <td>Test</td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td>Test</td> 
 
    </tr> 
 
</table>

Answer 2

Aufbauend auf @CharanKumar Antwort, was könnten Sie tun, ist die erste Spalte zu entfernen, und wenden Sie die Nummerierung auf die Zeile mit dem Text. Sie könnten dann einige padding und eine border-right hinzufügen, um eine separate Zelle zu simulieren.

Es würde wie folgt aussehen:

table { 
 
    border-collapse: collapse; 
 
} 
 
table tr:not(:first-child) { 
 
    counter-increment: rowNumber; 
 
} 
 
tr > td:first-child:empty, 
 
tr > td:first-child:empty ~ td { 
 
    display: none; 
 
} 
 
table tr td:first-child::before { 
 
    content: counter(rowNumber); 
 
    min-width: 1em; 
 
    margin-right: 0.5em; 
 
    border-right: 1px solid black; 
 
    padding: 1px 5px 1px 1px; 
 
}

<table border="1px" empty-cells:hide;> 
 
    <tr> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Test</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Test</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Test</td> 
 
    </tr> 
 
</table>