【发布时间】：2019-10-19 21:57:45
【问题描述】：
我在另一个表格的最后一行的最后一个单元格中有一个表格。 样式应为圆角。
“外”表看起来不错，但“内”表的每一行都有圆角单元格 - 是因为它位于“外”表的最后一行吗？如何将样式与其他表分开？
代码如下：
body {
margin: 30px;
}
table {
border-collapse: separate;
border-spacing: 0;
min-width: 350px;
}
table tr th,
table tr td {
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
padding: 5px;
}
table tr th:first-child,
table tr td:first-child {
border-left: 1px solid #bbb;
}
table tr th {
background: #eee;
border-top: 1px solid #bbb;
text-align: left;
}
/* top-left border-radius */
table tr:first-child th:first-child {
border-top-left-radius: 6px;
}
/* top-right border-radius */
table tr:first-child th:last-child {
border-top-right-radius: 6px;
}
/* bottom-left border-radius */
table tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
/* bottom-right border-radius */
table tr:last-child td:last-child {
border-bottom-right-radius: 6px;
} <table>
<tr>
<th>Ü1</th>
<th>Ü2</th>
<th>Ü3</th>
<th>Ü4</th>
</tr>
<tr>
<td>11</td>
<td>
<table>
<tr>
<th>Ü1</th>
<th>Ü2</th>
<th>Ü3</th>
<th>Ü4</th>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item1</td>
<td>item2</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item1</td>
<td>item2</td>
</tr>
</table>
</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>
<table>
<tr>
<th>Ü1</th>
<th>Ü2</th>
<th>Ü3</th>
<th>Ü4</th>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item1</td>
<td>item2</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item1</td>
<td>item2</td>
</tr>
</table>
</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>
<table>
<tr>
<th>reset</th>
<th>item2</th>
<th>item1</th>
<th>item2</th>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item1</td>
<td>item2</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item1</td>
<td>item2</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item1</td>
<td>item2</td>
</tr>
</table>
</td>
</tr>
</table>【问题讨论】：
-
这里的问题是您在屏幕截图中标记的表格本身位于其父级的 last 表格行中 - 所以像
table tr:last-child td:first-child这样的选择器适用于 所有内部表格中的最后一个表格单元格，无论它们位于哪个内部表格行中。 -
您可以通过使用子组合器轻松解决此问题 - 但是您必须将
table切换为tbody（因为表格行永远不是表格元素本身的直接子元素，而是表头、表脚或表体 - tbody 被隐式创建，如果它不在 HTML 中。）修改最后四个规则以使用tbody > tr:first-child > th:first-child形式的选择器，它应该可以按需要工作。
标签： html css html-table css-tables