javascript - 在除第一个 td 的 margin-top 和最后一个 td 的 margin-bottom 之外的所有 td 之间放置边距

Question

我试图在所有 <td> 之间放置边距除了 <td> 的 margin-top在第一行，<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，但正如您所注意到的，这同样适用于表格中的所有单元格。

您还可以在单​​个单元格上使用填充。因此，将表格保持在 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>