在两列之间添加空格答案

【问题标题】：Add space between two columns在两列之间添加空格
【发布时间】：2017-11-04 05:36:49
【问题描述】：

我有一个 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

【问题讨论】：

尝试阅读一下关于 cellpadding 和 cellspacings 的内容。 stackoverflow.com/q/15517632/1221731
申请border-style: double;，如下所示：jsfiddle.net/u5mN4/1668
@UncaughtTypeError 。它可以工作，但它的空间非常小。知道如何增加这个空间吗？
如果您要求它们更大，并且您无法使border-spacing 工作，那么考虑添加履行此角色的“空”单元格，然后您可以相应地调整这些空的间歇单元格的宽度.

标签： html css html-table

【解决方案1】：

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

没有单元格间距 CSS 属性。

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

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

… 有两个值。

所以：

border-spacing: 1em 0;

【讨论】：

不，边框间距也不起作用。你可以检查小提琴我用边框间距更新小提琴
@Ancient — 将border-collapse: collapse 从您的样式表中删除。它会导致 border-spacing 被忽略。（并在您的问题中添加minimal reproducible example，不要在第三方网站上隐藏代码的重要部分）。
我没有添加border-collapse: collapse。是的，我也会在这里添加 css
不知道...。也许我之前尝试添加，但我无法在我的样式部分看到这个折叠属性。这就是我发表声明的原因。无论如何它的工作和感谢

【解决方案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;
}

【讨论】：

jsbin.com/kisowoyaju/1/edit?html,css,output — 停止列排列

【解决方案3】：


table {

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

}

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

【讨论】：