在所有 td 之间放置边距，除了第一个 td 的边距顶部和最后一个 td 的边距底部

Question

我试图在所有 <td> 之间放置边距，但第一行 <td> 的边距顶部和最后一行 <td> 的边距底部除外。那可能吗？谢谢。

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

<table>
<tr><td> Hello World1 </td><td> Goodbye World1 </td></tr>
<tr><td> Hello World2 </td><td> Goodbye World2 </td></tr>
<tr><td> Hello World3 </td><td> Goodbye World3 </td></tr>
</table>

Answer 1

在单个表格单元格上放置不同的边距实际上是不可能的。您可以使用border-collapse 和border-spacing，但正如您所指出的，这同样适用于表格中的所有单元格。

您也可以在单个单元格上使用padding。因此，将表格保持在border-collapse: collapse，并在各个单元格上使用padding 来分隔。这会产生边距空间的视觉效果，但它并不是真正的边距。

您可能需要考虑的一件事是将您的td 内容包装在div 中。然后在表格单元格上使用边框 - 与背景颜色相同 - 将它们隔开：

body { background-color: white; }

table {
    width: 98%;
    margin: 0 auto;
    border-collapse: collapse;
}

td > div {
    border: 1px solid black;
    padding: 2px;
}

td {
    border-top: 10px solid white;
    border-bottom: 10px solid white;
    border-left: 50px solid white;
    border-right: 50px solid white;
}

tr:first-child > td { border-top:  none; }

tr:last-child > td { border-bottom:  none; }

<table>
    <tr>
        <td><div>Hello World1</div></td>
        <td><div>Goodbye World1</div></td>
    </tr>
    <tr>
        <td><div>Hello World2</div></td>
        <td><div>Goodbye World2</div></td>
    </tr>
    <tr>
        <td><div>Hello World3</div></td>
        <td><div>Goodbye World3</div></td>
    </tr>
</table>

Answer 2

在 css 中你有一个简单的解决方案：

http://www.w3schools.com/cssref/sel_nth-child.asp

http://www.w3schools.com/cssref/sel_nth-last-child.asp

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 : 0; // FIRST TD OF FIRST ROW
}
tr:nth-last-child(1) td:nth-last-child(1){
  border-spacing : 0;// LAST TD OF LAST ROW
}