0

我正在尝试通过使用 nth-child 为除第一行和最后一行之外的所有行放置边框间距，但由于某种原因它不起作用。我究竟做错了什么？

table {
border: 1px solid black;
width: 98%;
margin: 0 auto;
border-collapse: separate;
border-spacing: 10px 50px;
}
td {
border: 1px solid black;
}
tr:nth-child(1) td:nth-child(1) {
border-spacing : 0px 0px; 
}
tr:nth-child(1) td:nth-child(2) {
border-spacing : 0px 0px; 
}
tr:nth-child(3) td:nth-child(1) {
border-spacing : 0px 0px; 
}
tr:nth-child(3) td:nth-child(2) {
border-spacing : 0px 0px; 
}
<table>
<tr><td> row1 col1 </td><td> row1 col2 </td></tr>
<tr><td> row2 col1 </td><td> row2 col2 </td></tr>
<tr><td> row3 col1 </td><td> row3 col2 </td></tr>
<tr><td> row4 col1 </td><td> row4 col2 </td></tr>
<tr><td> row5 col1 </td><td> row5 col2 </td></tr>
</table>

4

2 回答 2

1

检查下面的代码，您可以将border-spacing效果应用于 table not for td or tr，您只能td直接使用 padding ，然后用于:first-child and :last-child删除 first 和 last 的填充td or tr。

table {
border: 1px solid black;
width: 98%;
margin: 0 auto;
border-collapse: separate;
border-spacing: 10px 50px;
}

td {
border: 1px solid black;
padding: 50px 10px;
}

tr:first-child td,tr:last-child td {
  padding: 5px; 
}
<table>
<tr><td> row1 col1 </td><td> row1 col2 </td></tr>
<tr><td> row2 col1 </td><td> row2 col2 </td></tr>
<tr><td> row3 col1 </td><td> row3 col2 </td></tr>
<tr><td> row4 col1 </td><td> row4 col2 </td></tr>
<tr><td> row5 col1 </td><td> row5 col2 </td></tr>
</table>

于 2016-02-17T07:45:42.697 回答
0

如果我对您的理解正确，那么border-spacing这不是您所追求的，但应该可以通过填充来实现效果。像下面这样的东西可以给你一种你似乎想要的可变间距：

td {
  padding: 50px 10px;
}
tr:first-child td,
tr:last-child td {
  padding: 0; 
}

由于您说您想要定位第一行和最后一行，:first-child并且:last-child比 更适合于任务:nth-child，这对于更复杂的选择（例如模式）（例如，每个第三个孩子等）更好。

我怀疑为清楚起见添加了边框，但是如果您需要它们，您可以执行一些操作，例如将 adiv环绕 = 每个td具有填充的内容并给 1px 边框td div（选择 a 中的任何div一个td）。

但是，如果填充使您在间距方面达到您想要的位置，那么其余的就可以很容易地被砍掉。

于 2016-02-17T07:24:38.067 回答