无法在没有CSS或cellspacing属性的<td>标签上设置边距

Question

由于某些原因，我无法使任何表格单元格之间产生间距。 我想让表格单元格具有灰色背景颜色（在白色页面背景上），以便它们看起来像带有白色间隔的瓷砖。

我尝试在HTML中：

<table cellspacing="3">

在 CSS 中，同样也需要进行相关操作。

table td {
    margin:3px;
}

什么都不起作用，单元格仍像一个大灰色的块一样粘在一起。我是不是漏掉了非常基本的东西？

这是实际代码：

<table width="100%" cellspacing="3">
    <tr>
        <th>Document Number</th>
        <th>BP Reference No.</th>
        <th>Posting Date</th>
        <th>Posting Week</th>
        <th>Customer/Vendor Code</th>
        <th>Customer/Vendor Name</th>
        <th>Item No.</th>
        <th>Item/Service Description</th>
        <th>Item Group</th>
        <th>Warehouse Code</th>
        <th>Remaining Open Quantity</th>
        <th>Line No.</th>
        <th>Sales Employee Name</th>
        <th>Stock</th>
        <th>Fill Rate</th>
        <th>1046</th>
        <th>1047</th>
        <th>1048</th>
        <th>1049</th>
        <th>1050</th>
        <th>1051</th>
        <th>1052</th>
        <th>1053</th>
        <th>1054</th>
        <th></th>
    </tr>
    <tr>
        <td>17272</td>
        <td>2244100</td>
        <td>5/24/2010</td>
        <td>22</td>
        <td>NYST</td>
        <td>NYSTROM INC.</td>
        <td>NYM118SX26DSTKS01</td>
        <td>Nystrom, Mort. 1-1/8'', Schl C~K, US26D, ST cam, 5pin, KS #43758</td>
        <td>Mort Cylinders</td>
        <td>US1</td>
        <td>1000</td>
        <td>3</td>
        <td>KRE Management 1</td>
        <td>0</td>
        <td>100</td>
        <td>1000</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td></td>
    </tr>
</table>

- jeffkee

Answer 1

如果有人仍然遇到这个问题，可以尝试在CSS样式表中添加以下内容：

table {
  border-collapse: separate;
  border-spacing: 10px 5px;
}

属性 border-spacing 的值是两个长度测量值。第一个测量值作用于列之间并表示水平方向上的间距，第二个测量值则作用于行之间。

如果只提供了一个值，则它将同时被应用于水平和垂直方向上的间距。默认设置为 0，会使表格内部网格的边框重叠。

- sebastian

---

了解有关border-collapse: separate的更多信息，请访问http://css-tricks.com/almanac/properties/b/border-collapse/。 - Gaurav Ramanan

Answer 2

如果你在样式表的开头使用了CSS重置，检查一下是否包含以下代码。

table {
  border-collapse: collapse;
}

如果是这种情况，尝试使用以下方式进行覆盖：

border-collapse: separate;

- Sam Nabi

---

960网格可能会做到这一点...让我试试。 - jeffkee

我通过 Firebug 确认折叠实际上是 CSS 重置的一部分，并且我的覆盖也成功将其设置为“separate”，但我仍然看不到任何边距。 - jeffkee

@jeffkee，在你将border-collapse: separate和border-spacing都设置为1像素或更多之前，你不会看到任何边距。 - John Washam

Answer 3

使td具有块级元素的样式。 尝试这样做,

<table width="100%" border="0" cellpadding="2" cellspacing="1">
  <tbody>
    <tr>
      <td class="SlateGridDataError">Please Re-enter login information</td>
    </tr>
  </tbody>
</table>

.SlateGridDataError {
    border-radius: 2px;
    display: block;
    font-size: 14px;
    color: #999999;
    display:block;
    border: 1px solid #dd3c39;
    border-left: 5px solid #dd3c39;
    padding: 12px 5px;
    margin-bottom: 20px;
    cursor: default;
    outline: none;
}

- Falah

Answer 4

我认为 cellspacing 的颜色与表格的背景颜色相同。
所以你有两个选择：
1. 将背景颜色应用于 td 而不是 <table> 本身。
2. 您可能想使用白色边框（<td> 的 border，并对表格使用 border-collapse: collapse）

- Nivas

---

我已经将背景颜色应用于td，而不是表格。但是我会尝试您使用白色边框的选项。 - jeffkee

Answer 5

尝试在您想要设置边距的两个TD之间添加一个td。将其设置为没有背景（只需不输入“background：something;”）并设置所需的宽度。如果您想在两个TR之间放置边距，只需在它们之间添加另一个tr，并放置一个具有所需高度的td。您甚至可以为TDs使用相同的类，并仅设置一次CSS。

- Breno

---

请提供一个示例将会非常有帮助。 - Nabin

为解决与CSS相关的问题而添加额外的空HTML标签？ - CodeFinity

Answer 6

所以我想出了一种简单的方法来解决问题，没有任何问题

假设你有

<tr><td>This is an example</td></tr>

Put encapsulate the whole data in a

tag like this

<tr><td><p>This is an example</p></td></tr>

and then give the

tag a margin-left of any value you want, let's say

<tr><td><p style="margin-left:4px;">This is an example</p></td></tr>

It does the magic for me without any hassle

- 1baga

---

这相当于在元素上添加填充，而不是所请求的边距。 - Mathias Lykkegaard Lorenzen

Answer 7

这只是一个简单的修复方法，但它有效。

如果您创建一个带有所需大小的边距的<table>，其中包含您现有的内容，并且两者都使用相同的背景或颜色，则可以将外部表格的边距设置为所需值。

如果您有一系列<TD>元素，请在要具有边距的<TD>内部创建一个<table>，并再次确保外部<table>和内部<TD>具有相同的背景或颜色。

来自我的博客http://harrolds.blogspot.com的示例，其中嵌入了一个脚本以显示引用...

主表：

<table width="100%" bgcolor="lightblue" border=1>
<tbody>
  <tr>
    <td align="left" width="160"><span style="font-family:Times New Roman;font-size: -1;"><small><a href="http://en.wikipedia.org/wiki/Zell_Miller" target="_new">Sen. Zell Miller</a> <small>(D-GA) RNC'04</small></small></span><br /><object width="120" height="106"><param name="movie" value="http://www.youtube-nocookie.com/v/b4GqdfRJf5E&amp;hl=en&amp;fs=1&amp;border=1" /><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><embed src="http://www.youtube-nocookie.com/v/b4GqdfRJf5E&hl=en&fs=1&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="120" height="106"></embed></object><br /><font size="-1"><span style="color: blue; font-family: "sylfaen";><a href="http://www.harrold.org/rfhextra/support_our_Troops.html" target="_new"><b><small>Liberators &amp; Defenders</small></b></a></span></font> 
    </td>

    <td background="http://harrold.org/rfhextra/images/bgparchmentlight.jpg">
      <table border=0>
        <tr>
          <td background="http://harrold.org/rfhextra/images/bgparchmentlight.jpg"><script language="javascript" src="http://www.harrold.org/rfhextra/quote.js" type="text/javascript"></script>
          </td>
        </tr>
      </table>
    </td>

    <td align="right"><a href="http://www.cafepress.com/rightwingstuff" target="_new"><small><small>RightWingStuff</small></small></a><br /><a href="http://www.gadsdenandculpeper.com/" target="_new"><img src="http://harrold.org/rfhextra/images/GadsdenFlag98x130.gif" width="98" height="130" alt="link source  http://www.cafepress.com/rightwingstuff" border="0" /></a>
    </td>
  </tr>
</tbody>
</table>

- rharrold

---

OT：这个问题涉及到CSS或表格属性。使用新表格来格式化矩形不仅已经过时，而且是有害的。 - hynekcer

信不信由你，这就是帮助我解决问题的解决方案。 - MKANET