CSS单元格边距
在我的HTML文档中，我有一个有两列和多行的表格。 我怎样才能增加第一和第二列之间的空间与CSS？ 我试过应用“margin-right：10px;” 到左侧的每个单元，但是没有效果。
将此应用于您的第一个<td> ：
padding-right:10px;
HTML例子：
<table> <tr> <td style="padding-right:10px">data</td> <td>more data</td> </tr> </table>
一个警告的话：虽然padding-right可能会解决您的特定（视觉）问题，这是不正确的方法来增加表格单元格之间的间距。 单元格的padding-right与大多数其他元素的padding-right类似：它在单元格内添加空格。 如果这些单元格没有边框或背景颜色或其他可以让游戏离开的东西，那么这可以模仿设置单元格之间空间的效果，但是不能。
正如有人指出的那样，表格单元格忽略了保证金规格：
CSS 2.1规范 – 表格 – 表格内容的可视布局
内部表格元素生成具有内容和边界的矩形框。 单元格也有填充。 内部表格元素没有边距。
那么什么是“正确”的方式呢？ 如果您正在寻找replace表格的cellspacing属性，则border-spacing （禁用border-collapse ）是替代。 但是，如果需要每单元“边距”，我不确定如何使用CSS正确实现。 我能想到的唯一的黑客就是使用上面的padding ，避免任何单元格的样式（背景颜色，边框等），而是在单元格内使用容器DIV来实现这种样式。
我不是一个CSS专家，所以我可能在上面错了（这将是伟大的知道！我也希望表格单元格边距CSS解决scheme）。
干杯!
如果你不能使用填充（例如你在td中有边框），试试这个
table { border-collapse: separate; border-spacing: 2px; }
我意识到这是相当迟来的，但为了logging，你也可以使用CSSselect器来做到这一点（不需要内联样式。）这个CSS应用填充到每一行的第一列：
table > tr > td:first-child { padding-right:10px }
这将是你的HTML，无CSS！：
<table><tr><td>data</td><td>more data</td></tr></table>
这允许更加优雅的标记，尤其是在需要使用CSS进行大量特定格式的情况下。
保证金不能在单个单元格上工作，但是您可以在两个单元格之间添加额外的列，您要在两个单元格之间放置一个空格…另一个选项是使用与背景具有相同颜色的边框。
你可以简单地做到这一点：
<html> <table> <tr> <td>one</td> <td width="10px"></td> <td>two</td> </tr> </table> </html>
没有CSS是必需的:)这10px是你的空间。
尝试padding-right 。 你不允许在单元之间放置margin 。
<table> <tr> <td style="padding-right: 10px;">one</td> <td>two</td> </tr> </table>
这个解决scheme适用于td ，它需要border和padding来padding样式。
（在Chrome 32，IE 11，Firefox 25上testing）
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>
2016年更新
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>
使用border-collapse：分开; 没有为我工作，因为我只需要在表格单元格之间的边缘，而不是在两边的表格。
我想出了下一个解决scheme：
– CSS
.tableDiv{ display: table; } .cellSeperator { display: table-cell; width: 20px; } .cell1 { display: table-cell; width: 200px; } .cell2 { display: table-cell; width: 50px; }
– HTML
<div class="tableDiv"> <div class="cell1"></div> <div class="cellSeperator"></div> <div class="cell2"></div> </div>
您不能以这种方式在单元格中单独列出单个列。 在我看来，最好的select是在第二列添加一个style='padding-left:10px' ，并将样式应用于内部div或元素。 这样可以达到更大空间的幻想。
如果您可以控制表格的宽度，请在所有表格单元格上插入填充左侧，并在整个表格上插入负余量。
table { margin-left: -20px; width: 720px; } table td { padding-left: 20px; }
请注意，表格的宽度需要包含填充/边距宽度。 以上述为例，表格的可视宽度将是700px。
如果您在表格单元格上使用边框，这不是最好的解决scheme。
解
我发现解决这个问题的最佳方式是试验和错误的结合，并阅读我之前写的东西：
正如你所看到的，我有一些非常棘手的事情正在进行……但是让这个看起来不错的主要原因是：
家长（UL）：边界崩溃：分开; border-spacing：.25em; 余量：-25em;
儿童元素（李）：display：table-cell; vertical-align：middle;
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
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; }
在Cian的解决scheme中设置边框代替边距之后，我发现您可以将边框颜色设置为透明，以避免与背景颜色匹配。 适用于FF17，IE9，Chrome v23。 看起来像一个体面的解决scheme，只要你不需要一个实际的边界。
<!DOCTYPE html> <html> <head> <style> table{ border-spacing: 16px 4px; } td { border: 1px solid black; } </style> </head> <body> <table style="width:100%"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> </body> </html>
你可以使用他们两个：
padding-right:10px; padding-right:10%;
但最好使用％ 。
如果填充不起作用，另一个解决方法是添加额外的列，并使用<colgroup>设置宽度的边距。 上面的填充解决scheme都没有为我工作，因为我试图给细胞边界本身一个边缘，这是最终解决了问题：
<table> <colgroup> <col> <col width="20px"> <col> </colgroup> <tr> <td>data</td> <td></td> <td>more data</td> </tr> </table>
使用下面的样式对表格单元格的边框进行样式设置：第二个和第三个列显示为单个列。
table tr td:nth-child(2) { border: 1px solid black; border-right:0; } table tr td:nth-child(3) { border: 1px solid black; border-left:0; }
