使用css在单元格（td）之间添加空格

Posted 2023-03-05

【中文标题】使用css在单元格（td）之间添加空格

【英文标题】：Add space between cells (td) using css

【发布时间】：2011-01-05 11:06:15

【问题描述】：

我正在尝试在单元格之间添加一个带有空格的表格，因为单元格的背景颜色为白色，表格的背景颜色为蓝色，您可以很容易地看到填充和边距不起作用（我将其应用于td)，它只会在单元格内部添加空间。

【问题讨论】：

How to set cellpadding and cellspacing in CSS? 的可能重复项

【参考方案1】：

你想要border-spacing:

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

或者在某处的 CSS 块中：

table 
  border-spacing: 10px;

在border-spacing 上查看quirksmode。请注意，border-spacing 不适用于 IE7 及以下版本。

【讨论】：

在IE7及以下，可以在table标签中使用cellspacing属性。您也可以同时提供两者以使其在 IE 中工作。其他浏览器会优先考虑样式。

【参考方案2】：

table  
  border-spacing: 10px; 
 

一旦我删除，这对我有用

border-collapse: separate;

来自我的表格标签。

【讨论】：

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

是的，不知道您也必须更改“border-collapse”。这应该是正确的答案。

【参考方案3】：

我的是：

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

【讨论】：

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

【参考方案4】：

考虑为table 标签或border-spacing css 属性使用cellspacing 和cellpadding 属性。

【参考方案5】：

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

【参考方案6】：

假设cellspcing/cellpadding/border-spacing属性不起作用，您可以使用如下代码。

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

我已经尝试并成功了，同时使用 table-width 分隔按钮并将空 td 设置为 2 或 1% 它不会返回更多不同。

【参考方案7】：

如果您想为边和上下设置单独的值。

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