Question

我有一个HTML表格。我需要在表列之间有间距，而不是表行。

我的表格列也有边框：

<table>
<tr>
    <td style="padding:0 15px 0 15px;">hello</td>
    <td style="padding:0 15px 0 15px;">world</td>
    <td style="padding:0 15px 0 15px;">how</td>
    <td style="padding:0 15px 0 15px;">are</td>
    <td style="padding:0 15px 0 15px;">you?</td>
</tr>
<tr>
    <td style="padding:0 15px 0 15px;">hello</td>
    <td style="padding:0 15px 0 15px;">world</td>
    <td style="padding:0 15px 0 15px;">how</td>
    <td style="padding:0 15px 0 15px;">are</td>
    <td style="padding:0 15px 0 15px;">you?</td>
</tr>
</table>

的CSS

table td{
   border : 1px solid black;
   border-spacing: 1em 0;
 }

fiddle

Answer 1

如果我使用cellspacing css属性，它会在行和列之间进行。

没有cellspacing CSS属性。

该属性称为border-spacing和...

长度指定分隔相邻单元格边框的距离。如果指定了一个长度，则它给出水平和垂直间距。如果指定了两个，则第一个给出水平间距，第二个给出垂直间距。长度可能不是负数。

...有两个值。

所以：

border-spacing: 1em 0;

Answer 2

将display设为inline-table并为每个td创建右边距：

table tr td{
  border:1px solid black;
  display:inline-table;
  margin-right:10px;
}

您可以通过以下方式删除上一个孩子的保证金：

table tr td:last-child {
    margin-right:0;
}

Answer 3


table {

    border-collapse: separate;
    border-spacing: 1em 0;

}

https://www.w3schools.com/cssref/pr_border-spacing.asp

在两列之间添加空格

3 个答案: