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

在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
}

Answer 2

不可能在单个表格单元格上放置不同的边距。您可以使用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>

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

2 个答案: