使用 class 仅向 table 的直接子级添加边框

Question

我想为我特定的 table 的 td 和 th 添加边框，所以我喜欢 :

table.borderedtable td, th {
  border: 1px solid black;
}

table.borderedtable {
  border-collapse: collapse;
}

<table class='borderedtable'>

  <tr>
    <td>
      <table>

        <tr>
          <td></td>

        </tr>

      </table>
    </td>

  </tr>

</table>

问题是里面的table也得到了边框我希望边框只添加到table和class下的td和th。所以我尝试使用直接子 select > 如下所示：

table.borderedtable>tr>td,>tr>th {
  border: 1px solid black;
}

table.borderedtable {
  border-collapse: collapse;
}

<table class='borderedtable'>

  <tr>
    <td>
      <table>

        <tr>
          <td></td>

        </tr>

      </table>
    </td>

  </tr>

</table>

现在我没有任何边框

Answer 1

浏览器会自动在 table 中插入一个 <tbody> 元素，因此 tbody 是 table 的直接后代，而不是 tr。

例如，select table 中的第一个 td 你会这样做：

table.borderedtable>tbody>tr>td {
  border: 1px solid black;
}

Answer 2

table.borderedtable>tbody>tr>td, table.borderedtable>thead>tr>th {
  border: 1px solid black;
}

table.borderedtable {
  border-collapse: collapse;
}

使用 class 仅向 table 的直接子级添加边框

adding border only to direct child of table with a class

html

css

border