如果 table 只有一行，则 table 的 css 不同

Question

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

在不改变HTML或者不使用JS的情况下，有没有办法只用CSS来完成这个？

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>

如果 table 只有一行，则 table 的 css 不同

Different css for table if table has only one row

html

css

html-table