Html 不能在既没有 CSS 也没有 cellpacing 属性的 <td> 标签上放置边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4397142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cannot put margin on <td> tag with neither CSS nor cellspacing attribute
提问by jeffkee
For whatever reason, I have been unable to get any table cells to have margin between them. I want the table cells to have a grey background colour (over a white page background) so it looks like tiles with white between them.
无论出于何种原因，我一直无法让任何表格单元格在它们之间留有余量。我希望表格单元格具有灰色背景颜色（在白色页面背景上），因此它看起来像它们之间有白色的瓷砖。
I tried in the HTML,
我在 HTML 中尝试过，
<table cellspacing="3">
Also in the CSS,
同样在 CSS 中，
table td {
margin:3px;
}
Nothing works. The cells are still stuck together, like one big grey blob. Am I missing something very very basic here?
什么都行不通。细胞仍然粘在一起，就像一个大的灰色斑点。我在这里错过了非常非常基本的东西吗？
Here's the actual code:
这是实际的代码：
<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>
回答by sebastian
If someone still has this problem, try this in your CSS stylesheet:
如果有人仍然遇到此问题，请在您的 CSS 样式表中尝试此操作：
table {
border-collapse: separate;
border-spacing: 10px 5px;
}
The values for border-spacing are two length measurements. The horizontal value comes first and applies between columns. The second measurement is applied between rows.
边界间距的值是两个长度测量值。水平值首先出现并应用于列之间。第二个测量应用于行之间。
If you provide one value, it will be used both horizontally and vertically. The default setting is 0, causing the borders to double up on the inside grid of the table.
如果您提供一个值，它将被水平和垂直使用。默认设置为 0，导致边框在表格的内部网格上加倍。
回答by Sam Nabi
If you're using a CSS reset at the beginning of your stylesheet, check to see if it has the following code.
如果您在样式表的开头使用 CSS 重置，请检查它是否具有以下代码。
table {
border-collapse: collapse;
}
If that's the case, try overriding it with:
如果是这种情况，请尝试使用以下方法覆盖它：
border-collapse: separate;
回答by Falah
make style td with block. Try this,
用块制作风格 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;
}
回答by Breno
Try adding a td between the two TDs you want to have the margin. Set it to have no background (just don't put "background:something;") and to have the width you want. If you want to put a margin between two TRs, just add another tr between them and put a td with the height you want the margin to have. You can even use the same class for the TDs and set the CSS only once.
尝试在您想要留出余量的两个 TD 之间添加一个 td。将其设置为没有背景（只是不要放置“背景：某物；”）并具有您想要的宽度。如果您想在两个 TR 之间放置一个边距，只需在它们之间添加另一个 tr 并放置一个 td 与您希望边距具有的高度。您甚至可以为 TD 使用相同的类，并且只设置一次 CSS。
回答by Nivas
I think cellspacingtakes the color same as the table's background color.
So you have two options:
1. Apply the background color to the tds rather than the <table>itself.
2. You might want to use a white border (borderfor <td>with a border-collapse: collapsefor the table)
我认为cellspacing采用与表格背景颜色相同的颜色。
所以你有两个选择：
1. 将背景颜色应用到tds 而不是它<table>本身。
2.您可能需要使用白色边框（border用于<td>与border-collapse: collapse该表）
回答by 1baga
So i figured out a simple way off solving the problem without any problem
所以我想出了一个简单的方法来解决这个问题，没有任何问题
let's say you have
假设你有
<tr><td>This is an example</td></tr>
Put encapsulate the whole data in a
put 将整个数据封装在一个
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
它毫不费力地为我施展魔法
回答by rharrold
This is a crude fix, but it works.
这是一个粗略的修复，但它有效。
If you create a <table>with a margin of the size you want ..containing your existing , both using the same background or color you can set the margin of the outer table to be what you want.
如果您创建一个<table>具有您想要的大小的边距 .. 包含您现有的 ，两者都使用相同的背景或颜色，您可以将外部表格的边距设置为您想要的。
If you have a series of <TD>elements, create a <table>inside the <TD>that you want to have a margin and again be sure that both the outer <table>and inner <TD>have the same background or color.
如果您有一系列<TD>元素，请<table>在<TD>您想要留出边距的内部创建一个，并再次确保外部<table>和内部<TD>具有相同的背景或颜色。
example from my blog at http://harrolds.blogspot.comwhich embeds a script to display quotations...
来自我在http://harrolds.blogspot.com上的博客的示例，它嵌入了一个脚本来显示引用...
Main table:
主表：
<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&hl=en&fs=1&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 & 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>
