不能在<td>标签上放置边距,既没有CSS也没有cellspacing属性

jef*_*kee 31 html css html-table margin cellspacing

无论出于何种原因,我无法让任何表格单元格在它们之间有边距.我希望表格单元格具有灰色背景颜色(在白页背景上),因此它看起来像是在它们之间带有白色的图块.

我试过HTML,

<table cellspacing="3">
Run Code Online (Sandbox Code Playgroud)

同样在CSS中,

table td {
    margin:3px;
}
Run Code Online (Sandbox Code Playgroud)

什么都行不通.细胞仍然粘在一起,就像一个大灰色的斑点.我错过了非常基本的东西吗?

这是实际的代码:

<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>
Run Code Online (Sandbox Code Playgroud)

小智 84

如果有人仍有此问题,请在CSS样式表中尝试:

table {
  border-collapse: separate;
  border-spacing: 10px 5px;
}
Run Code Online (Sandbox Code Playgroud)

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

如果您提供一个值,它将在水平和垂直方向使用.默认设置为0,导致边框在表格的内部网格上加倍.


Sam*_*abi 7

如果您在样式表的开头使用CSS重置,请检查它是否具有以下代码.

table {
  border-collapse: collapse;
}
Run Code Online (Sandbox Code Playgroud)

如果是这种情况,请尝试用以下方法覆盖它:

border-collapse: separate;
Run Code Online (Sandbox Code Playgroud)


小智 5

使用块制作样式 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;
}
Run Code Online (Sandbox Code Playgroud)