Question

我想在我的特定表格的td添加边框，所以我喜欢：

src
└── a
    ├── b
    │   └── bar
    └── foo

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

问题是内部表格也获得了边框我希望边框只添加到表格下的td和th下面。所以我尝试使用直接子选择<table class='borderedtable'> <tr> <td> <table> <tr> <td></td> </tr> </table> </td> </tr> </table>，如下所示：

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

现在我没有任何边界

Answer 1

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

例如，要选择表格中的第一个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;
}

仅为具有类的表的直接子项添加边框

2 个答案: