使用CSS在单元格（TD）之间添加空间

89

我正在尝试添加一个在单元格之间留有空格的表格，因为单元格的背景色是白色，表格的背景色是蓝色，您可以轻松地看到padding和margin无效（我将其应用于td），它只会在单元内部增加空间。

html css

— 阿姆拉
source

2

如何在CSS中设置cellpadding和cellspacing的

— 用户

115

您要border-spacing：

<table style="border-spacing: 10px;">

或在某处的CSS块中：

table {
  border-spacing: 10px;
}

见怪异模式上border-spacing。请注意，这border-spacing不适用于IE7及以下版本。

— 多米尼克·罗杰（Dominic Rodger）
source

2

在IE7及更低版本中，您可以在表格标签中使用cellspacing属性。您可以同时提供它们以使其在IE中工作。其他浏览器将优先考虑样式。

— Tor Valamo 2010年

36

table { 
  border-spacing: 10px; 
}

一旦我删除，这对我有用

border-collapse: separate;

从我的桌子标签。

— 凯莉
source

1

分开而不是分开，但它帮助了我:-)

— FredRoger 2012年

是的，不知道您也必须更改“边界崩溃”。这应该是正确的答案。

— jleggio

30

我的是：

border-spacing: 10px;
border-collapse: separate;

— 简·波普
source

我需要添加boder-collapse CSS属性以使边距生效。谢谢

— ufk

4

考虑对tag或css属性使用cellspacing和cellpadding属性。tableborder-spacing

— 尼加那波
source

4

TABLE标记的cellspacing（单元格之间的距离）参数正是您想要的。缺点是它是一个值，用于x和y，您不能选择不同的间距或垂直/水平填充。也有一个CSS属性，但并未得到广泛支持。

— SF。
source

2

假设cellspcing/ cellpadding/border-spacing属性没有工作，你可以使用代码如下。

<div class="form-group">
  <table width="100%" cellspacing="2px" style="border-spacing: 10px;">
    <tr>                        
      <td width="47%">
        <input type="submit" class="form-control btn btn-info" id="submit" name="Submit" />
      </td>
      <td width="5%"></td>
      <td width="47%">
        <input type="reset" class="form-control btn btn-info" id="reset" name="Reset" />
      </td>
    </tr>
  </table>
</div>

我已经尝试过并成功使用表宽度分隔按钮，并将2或1％的空td设置为空，则返回的值没有更多不同。

— 内存
source

0

如果要为侧面和上下分别设置值。

<table style="border-spacing: 5px 10px;">

— 遗忘约翰
source