HTML Спрятать строки таблицы

Question

Итак, я пытаюсь добавить инкрементный номер в первую ячейку таблицы HTML. Что я сделал, используя примеры, найденные на этом форуме. То, что я хочу сделать дальше, - это скрыть любую строку, содержащую только номер в первой ячейке. Единственный реальный вариант, который у меня есть, - css, но я не уверен, что это возможно. Код, который я до сих пор

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

пожалуйста, проверьте ниже фрагмент кода отвечает вашим требованиям.

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

Здесь я прячу все элементы родственного TR, если первый TR пуст. С помощью CSS вы не можете управлять родительским, поскольку родительских селекторов нет.

Вот код -

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

Опираясь на @CharanKumar ответ, что вы могли бы сделать, это удалить первый столбец, и применить нумерацию к строке с текстом. Затем вы можете добавить некоторые padding и border-right для имитации отдельной ячейки.

Это будет выглядеть, как показано ниже:

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>