在所有td之间放置边距，除了第一个td的margin-top和最后一个td的margin-bottom [英] Placing margins between all td except the margin-top of first td and margin-bottom of last td

问题描述

我尝试在所有< td> 之间放置边距（< td> ，以及最后一行中的< td> 的页边空白。那可能吗？感谢。

< pre class =snippet-code-css lang-css prettyprint-override> table {border：1px solid black; width：98％; margin：0 auto; border-collapse： ：10px 50px;} td {border：1px solid black;}

 < table>< tr>< td> Hello World1< / td>< td>再见世界1< / td>< / tr>< tr>< td> Hello World2< / td>< td> Goodbye World2< / td>< / tr>< tr>< td> Hello World3< / td>< td>再见世界3< / td>< / tr>< / table>  

解决方案

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

I'm trying to place margins between all <td> except the margin-top of the <td> in the first row, and the margin-bottom of the <td> in the last row. Is that possible? Thanks.

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>

解决方案

Placing different margins on individual table cells isn't really possible. You could use border-collapse and border-spacing, but as you have noted, this applies equally to all cells in the table.

You could also use padding on the individual cells. So, keep the table at border-collapse: collapse, and use padding on the individual cells for spacing. This creates the visual effect of margin space, but it's not really margin.

One thing you may want to consider is wrapping your td content in a div. Then use borders – with the same color as the background – on the table cells to space them around:

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的margin-top和最后一个td的margin-bottom的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！