如何仅将水平单元格间距应用于 HTML 表格？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10906932/
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
How do I apply only horizontal cell spacing to a HTML table?
提问by
I recently found out that I need to use the cellspacing attribute in my table, but I was wondering if I could get it to work only horizontally. I don't want it to vertically spread out, that messes up the layout of my entire page.
我最近发现我需要在我的表格中使用 cellpacing 属性，但我想知道我是否可以让它只水平工作。我不希望它垂直展开，这会弄乱我整个页面的布局。
回答by
A better way than setting cellspacing="10"is to use CSS. You can use the following CSS to target the table's cell spacing.
比设置更好的方法cellspacing="10"是使用 CSS。您可以使用以下 CSS 来定位表格的单元格间距。
table {
border-spacing: 10px 0;
}
The first value specifies the horizontal spacing, and the second value specifies the vertical spacing.
第一个值指定水平间距，第二个值指定垂直间距。
回答by Jukka K. Korpela
If you just need to set cell contentsapart, use spacing inside cells (and set cellspacing=0in HTML). This is universally supported by CSS-enabled browsers.
如果您只需要将单元格内容分开，请在单元格内使用间距（并cellspacing=0在 HTML 中设置）。这受到支持 CSS 的浏览器的普遍支持。
If you really need to separate the cells themselves, so that there is spacing between their borders or their colored background, then border-spacingwould solve the problem, but only in supporting browsers.
如果您真的需要将单元格本身分开，以便它们的边框或彩色背景之间有间距，那么border-spacing可以解决问题，但仅限于支持浏览器。
Depending on the context, you might even consider simulating cell spacing by putting cell contents in a div, set to cover the cell area except desired padding, which will then look like cell spacing. You would then set any desired border or background on those divelements.
根据上下文，您甚至可以考虑通过将单元格内容放在 a 中div来模拟单元格间距，设置为覆盖除所需填充之外的单元格区域，然后看起来像单元格间距。然后，您可以在这些div元素上设置任何所需的边框或背景。
回答by Scott Biggs
Yeah, I know it's ugly and abhorrent to the separation of content and styling, but adding spacer (invisible) columns seems the only thing that consistently works across all platforms.
是的，我知道内容和样式的分离既丑陋又令人厌恶，但添加间隔（不可见）列似乎是唯一在所有平台上都能始终如一地工作的方法。
Here I put some empty table data in the first row and gave them a width (in pixels). I made corresponding empty table data in the successive rows. It feels real old school, but it's simple and works.
在这里，我在第一行放了一些空的表格数据，并给了它们一个宽度（以像素为单位）。我在连续的行中制作了相应的空表数据。感觉真的很老派，但它很简单而且有效。
<table>
<tr>
<td>some content for column 1</td>
<td width="18" />
<td>other content for 2nd visible column (actually column 3)</td>
<td width="18" />
<td>content for 3rd visible column (actually column 5)</td>
</tr>
<tr>
<td><img src="image_for_column 1.png" /></td>
<td />
<td><img src="image_for_column 2.png" /></td>
<td />
<td><img src="image_for_column 3.png" /></td>
</tr>
</table>
