Html CSS 单元格边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/716442/
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
CSS Cell Margin
提问by Tom
In my HTML document, I have a table with two columns and multiple rows. How can I increase the space in between the first and second column with css? I've tried applying "margin-right: 10px;" to each of the cells on the left hand side, but to no effect.
在我的 HTML 文档中，我有一个包含两列多行的表格。如何使用css增加第一列和第二列之间的空间？我试过应用“margin-right: 10px;” 到左侧的每个单元格，但没有效果。
采纳答案by roman m
Apply this to your first <td>:
将此应用于您的第一个<td>：
padding-right:10px;
HTML example:
HTML 示例：
<table>
<tr>
<td style="padding-right:10px">data</td>
<td>more data</td>
</tr>
</table>
回答by ravi
A word of warning: though padding-rightmight solve your particular (visual) problem, it is not the right way to add spacing betweentable cells. What padding-rightdoes for a cell is similar to what it does for most other elements: it adds space withinthe cell. If the cells do not have a border or background colour or something else that gives the game away, this can mimic the effect of setting the space between the cells, but not otherwise.
警告：虽然padding-right可能会解决您的特定（视觉）问题，但这不是在表格单元格之间添加间距的正确方法。什么padding-right确实的细胞类似于它做什么其他大多数元素：它增加了空间中的单元格。如果单元格没有边框或背景颜色或其他让游戏失去乐趣的东西，这可以模拟设置单元格之间的空间的效果，但不是其他方式。
As someone noted, margin specifications are ignored for table cells:
正如有人指出的那样，表格单元格的边距规格被忽略：
CSS 2.1 Specification – Tables – Visual layout of table contents
Internal table elements generate rectangular boxes with content and borders. Cells have padding as well. Internal table elements do not have margins.
内部表格元素生成带有内容和边框的矩形框。单元格也有填充。内部表格元素没有边距。
What's the "right" way then? If you are looking to replace the cellspacingattribute of the table, then border-spacing(with border-collapsedisabled) is a replacement. However, if per-cell "margins" are required, I am not sure how that can be correctly achieved using CSS. The only hack I can think of is to use paddingas above, avoid any styling of the cells (background colours, borders, etc.) and instead use container DIVs inside the cells to implement such styling.
那什么是“正确”的方式呢？如果您要替换cellspacing表的属性，那么border-spacing(with border-collapsedisabled) 就是替换。但是，如果需要每个单元格的“边距”，我不确定如何使用 CSS 正确实现。我能想到的唯一 hack 是使用padding上述方法，避免对单元格进行任何样式设置（背景颜色、边框等），而是在单元格内使用容器 DIV 来实现此类样式。
I am not a CSS expert, so I could well be wrong in the above (which would be great to know! I too would like a table cell margin CSS solution).
我不是 CSS 专家，所以我在上面很可能是错误的（知道这会很棒！我也想要一个表格单元格边距 CSS 解决方案）。
Cheers!
干杯!
回答by nika206
If you can't use padding (for example you have borders in td) try this
如果你不能使用填充（例如你在 td 中有边框）试试这个
table {
border-collapse: separate;
border-spacing: 2px;
}
回答by Cian
margin does not work unfortunately on individual cells, however you could add extra columns between the two cells you want to put a space between... another option is to use a border with the same colour as the background...
不幸的是，边距在单个单元格上不起作用，但是您可以在要在其间放置空格的两个单元格之间添加额外的列……另一种选择是使用与背景颜色相同的边框……
回答by Cian
I realize this is quite belated, but for the record, you can also use CSS selectors to do this (eliminating the need for inline styles.) This CSS applies padding to the first column of every row:
我意识到这已经很晚了，但为了记录，您也可以使用 CSS 选择器来执行此操作（消除对内联样式的需要。）此 CSS 将填充应用于每一行的第一列：
table > tr > td:first-child { padding-right:10px }
And this would be your HTML, sans CSS!:
这将是你的 HTML，没有 CSS！：
<table><tr><td>data</td><td>more data</td></tr></table>
This allows for much more elegant markup, especially in cases where you need to do lots of specific formatting with CSS.
这允许更优雅的标记，特别是在您需要使用 CSS 进行大量特定格式设置的情况下。
回答by MrTrebor
You can simply do that:
你可以简单地这样做：
<html>
<table>
<tr>
<td>one</td>
<td width="10px"></td>
<td>two</td>
</tr>
</table>
</html>
No CSS is required :) This 10px is your space.
不需要 CSS :) 这个 10px 是你的空间。
回答by mpen
Try padding-right. You're not allowed to put margin's between cells.
试试padding-right。不允许将margin's放在单元格之间。
<table>
<tr>
<td style="padding-right: 10px;">one</td>
<td>two</td>
</tr>
</table>
回答by Ason
This solution work for td's that need both borderand paddingfor styling.
(Tested on Chrome 32, IE 11, Firefox 25)
这对于解决工作td的同时需要border和padding对造型。
（在 Chrome 32、IE 11、Firefox 25 上测试）
CSS:
table {border-collapse: separate; border-spacing:0; } /* separate needed */
td { display: inline-block; width: 33% } /* Firefox need inline-block + width */
td { position: relative } /* needed to make td move */
td { left: 10px; } /* push all 10px */
td:first-child { left: 0px; } /* move back first 10px */
td:nth-child(3) { left: 20px; } /* push 3:rd another extra 10px */
/* to support older browsers we need a class on the td's we want to push
td.col1 { left: 0px; }
td.col2 { left: 10px; }
td.col3 { left: 20px; }
*/
HTML:
<table>
<tr>
<td class='col1'>Player</td>
<td class='col2'>Result</td>
<td class='col3'>Average</td>
</tr>
</table>
Updated 2016
2016 年更新
Firefox now support it without inline-blockand a set width
Firefox 现在支持它没有inline-block和集width
table {border-collapse: separate; border-spacing:0; }
td { position: relative; padding: 5px; }
td { left: 10px; }
td:first-child { left: 0px; }
td:nth-child(3) { left: 20px; }
td { border: 1px solid gray; }
/* CSS table */
.table {display: table; }
.tr { display: table-row; }
.td { display: table-cell; }
.table { border-collapse: separate; border-spacing:0; }
.td { position: relative; padding: 5px; }
.td { left: 10px; }
.td:first-child { left: 0px; }
.td:nth-child(3) { left: 20px; }
.td { border: 1px solid gray; }<table>
<tr>
<td>Player</td>
<td>Result</td>
<td>Average</td>
</tr>
</table>
<div class="table">
<div class="tr">
<div class="td">Player</div>
<div class="td">Result</div>
<div class="td">Average</div>
</div>
</div>回答by Robin
Using border-collapse: separate;didn't work for me, because I only need a margin in-between the table cells not on the sides of the table.
使用边框折叠：分离；对我不起作用，因为我只需要表格单元格之间的边距而不是表格的两侧。
I came up with the next solution:
我想出了下一个解决方案：
-CSS
- CSS
.tableDiv{
display: table;
}
.cellSeperator {
display: table-cell;
width: 20px;
}
.cell1 {
display: table-cell;
width: 200px;
}
.cell2 {
display: table-cell;
width: 50px;
}
-HTML
- HTML
<div class="tableDiv">
<div class="cell1"></div>
<div class="cellSeperator"></div>
<div class="cell2"></div>
</div>
回答by Oneezy
SOLUTION
解决方案
I found the best way to solving this problem was a combination of trial and error and reading what was written before me:
我发现解决这个问题的最好方法是反复试验并阅读我之前写的内容：
As you can see I have some pretty tricky stuff going on... but the main kicker of getting this to looking good are:
正如你所看到的，我有一些非常棘手的事情……但让这个看起来不错的主要因素是：
PARENT ELEMENT (UL): border-collapse: separate; border-spacing: .25em; margin-left: -.25em;
CHILD ELEMENTS (LI): display: table-cell; vertical-align: middle;
PARENT ELEMENT (UL)：边框折叠：单独；边框间距：0.25em；左边距：-.25em；
子元素（LI）：显示：表格单元格；垂直对齐：中间；
HTML
HTML
<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>
CSS
CSS
ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; }
li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; }
