不能在既没有 CSS 也没有单元格空间属性的 <td> 标记上放置边距

Posted 2023-03-06

【中文标题】不能在既没有 CSS 也没有单元格空间属性的 <td> 标记上放置边距

【英文标题】：Cannot put margin on <td> tag with neither CSS nor cellspacing attribute

【发布时间】：2011-05-22 18:43:52

【问题描述】：

无论出于何种原因，我都无法让任何表格单元格在它们之间留有边距。我希望表格单元格具有灰色背景色（在白色页面背景上），因此它看起来像它们之间带有白色的瓷砖。

我在 html 中尝试过，

<table cellspacing="3">

同样在 CSS 中，

table td 
    margin:3px;

没有任何作用。细胞仍然粘在一起，像一个大的灰色斑点。我在这里错过了一些非常基本的东西吗？

这是实际代码：

<table  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>

【参考方案1】：

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

table 
  border-collapse: collapse;

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

border-collapse: separate;

【讨论】：

960 格可能会这样做...让我试试看。

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

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

【参考方案2】：

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

【讨论】：

我已经将 bg 颜色应用于 td，而不是 table。不过，我会尝试使用白色边框的选项。

【参考方案3】：

如果有人仍然有此问题，请在您的 CSS 样式表中尝试：

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

border-spacing 的值是两个长度测量值。水平的 值首先出现并应用于列之间。第二个测量是 行间应用。

如果您提供一个值，它将被水平和垂直使用。默认设置为 0，导致表格内部网格的边框加倍。

【讨论】：

了解更多关于边框折叠的信息：单独的css-tricks.com/almanac/properties/b/border-collapse

【参考方案4】：

这是一个粗略的修复，但它有效。

如果您创建一个<table>，其边距为您想要的大小......包含您现有的，两者都使用相同的背景或颜色，您可以将外部表格的边距设置为您想要的。

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

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

主表：

<table  bgcolor="lightblue" border=1>
<tbody>
  <tr>
    <td align="left" ><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  ><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"  ></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"    border="0" /></a>
    </td>
  </tr>
</tbody>
</table>

【讨论】：

OT：问题是关于 CSS 或表格属性的。使用新表格形成矩形不仅不推荐使用，而且具有威慑作用

【参考方案5】：

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

假设你有

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

把整个数据封装在一个

像这样的标签

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

然后给

标记你想要的任何值的左边距，比如说

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

它对我来说很神奇，没有任何麻烦

【讨论】：

这相当于按照要求在元素上放置填充，而不是边距。

【参考方案6】：

尝试在您想要保留边距的两个 TD 之间添加一个 td。将其设置为没有背景（只是不要放置“背景：某物；”）并具有您想要的宽度。如果您想在两个 TR 之间添加一个边距，只需在它们之间添加另一个 tr 并放置一个 td 与您希望边距具有的高度。您甚至可以对 TD 使用相同的类并只设置一次 CSS。

【讨论】：

请举个例子会很有帮助

添加额外的空 HTML 标签来解决与 CSS 相关的问题？ ??

【参考方案7】：

用块制作样式 td。 试试这个，

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