不能在既没有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>

Answer 1

如果有人仍然有这个问题，在你的CSS样式表中试试这个：

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

边界间距的值是两个长度测量值。水平值首先出现，并在列之间应用。第二个度量在行之间应用。

如果您提供一个值，它将同时用于水平和垂直方向。默认设置为0，导致边框在表格的内部网格上对齐。

Answer 2

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

table {
  border-collapse: collapse;
}

如果是这种情况，请尝试使用以下命令覆盖它：

border-collapse: separate;

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;
}