html - 如果表只有一行，则表的不同 css

Question

我在一个网站上有多个表格。如果表格有多行，那么每个单元格都应该有边界，现在用td {border: 1px solid black;}. 但是如果表格只有一行，我想隐藏边框或让边框宽度为 0。

在不更改 HTML 或使用 JS 的情况下，有没有办法纯粹使用 CSS 来完成？

标签： htmlcsshtml-table

Answer 1

为单行添加选择器。

table {
  border-collapse: collapse;
}
td {
  border: 1px solid black;
}
table tbody tr:only-child td { /* The override. */
  border: none;
}

<table>
<tbody>
  <tr><td>1</td><td>2</td><td>3</td></tr>
</tbody>
</table>
<br>
<table>
<tbody>
  <tr><td>1</td><td>2</td><td>3</td></tr>
  <tr><td>4</td><td>5</td><td>5</td></tr>
</tbody>
</table>