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来模拟单独的单元格。

如下所示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;