CSS 单元格边距
Posted
技术标签:
【中文标题】CSS 单元格边距【英文标题】：CSS Cell Margin 【发布时间】：2010-10-17 12:24:22 【问题描述】：在我的 html 文档中，我有一个包含两列和多行的表格。如何使用 css 增加第一列和第二列之间的空间？我试过应用“margin-right：10px;”到左侧的每个单元格，但没有效果。
【问题讨论】：
这里有一个不错的CSS解决方案，最新更新：***.com/a/21551008/2827823 【参考方案1】：此解决方案适用于需要 border 和 padding 进行样式设置的 td。
（在 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>
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>【讨论】：
这也适用于由 div 组成的 css 表（display:table*）。【参考方案2】：如果填充不适合您，另一种解决方法是添加额外的列并使用<colgroup> 通过宽度设置边距。上面的填充解决方案都不适合我，因为我试图给单元格边框本身留出边距，这就是最终解决问题的方法：
<table>
<colgroup>
<col>
<col >
<col>
</colgroup>
<tr>
<td>data</td>
<td></td>
<td>more data</td>
</tr>
</table>
使用 :nth-child 设置表格单元格的边框样式，使第二列和第三列显示为单列。
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;
【讨论】：
这是掩盖问题，而不是回答问题。没有人会通过这样做来学习如何正确地做到这一点【参考方案3】：你可以同时使用它们：
padding-right:10px;
padding-right:10%;
但最好与 % 一起使用。
【讨论】：
我投了赞成票，但您可能已经解释了为什么最好使用%
通常使用 % 来做出响应。
加一个 - 也许你可以编辑你的答案这么说？不是每个阅读的人都可能阅读 cmets.. 如果您想添加有关响应式设计的链接，那就更好了 :-)【参考方案4】：
<!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>使用填充不是正确的做法，它可能会改变外观，但这不是您想要的。这可能会解决您的问题。
【讨论】：
这个解决方案已经发布了，不需要2个答案说同样的话。【参考方案5】：使用 border-collapse: separate; 对我不起作用，因为我只需要表格单元格之间的边距，而不是表格的两侧。
我想出了下一个解决方案：
-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>
【讨论】：
【参考方案6】：解决方案
我发现解决这个问题的最佳方法是反复试验和阅读我之前写的内容：
http://jsfiddle.net/MG4hD/
正如你所看到的，我有一些非常棘手的事情正在发生......但让它看起来不错的主要因素是：
父元素（UL）：边框折叠：分离；边框间距：0.25em；左边距：-.25em； 子元素（LI）：显示：表格单元；垂直对齐：中间；
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;
【讨论】：
【参考方案7】：警告：虽然padding-right 可能会解决您的特定（视觉）问题，但它不是在 表格单元格之间添加间距的正确方法。 padding-right 对单元格的作用类似于它对大多数其他元素的作用：它在单元格内添加空间。如果单元格没有边框或背景颜色或其他让游戏无法进行的东西，这可以模仿设置单元格之间的空间的效果，但不是其他的。
正如有人指出的那样，表格单元格的边距规格被忽略：
CSS 2.1 Specification – Tables – Visual layout of table contents
内部表格元素生成 带有内容的矩形框和 边界。单元格也有填充。 内部表格元素没有 边距。
那么“正确”的方法是什么？如果您要替换表的cellspacing 属性，则border-spacing（禁用border-collapse）是一个替换。但是，如果需要每个单元格的“边距”，我不确定如何使用 CSS 正确实现。我能想到的唯一技巧是如上所述使用padding，避免单元格的任何样式（背景颜色、边框等），而是在单元格内使用容器 DIV 来实现这种样式。
我不是 CSS 专家，所以我很可能在上面说错了（很高兴知道！我也想要一个表格单元格边距 CSS 解决方案）。
干杯！
【讨论】：
这很好，而且全部用于填充，但是边距呢？我想在包含边框的单元格之外添加空间。 Margin CSS 似乎对单元格没有影响。 Levitikon，没错 - 由于上述原因，边距不起作用。 AFAIK，获得所需内容的唯一方法是将单元格的内容包装在 DIV 中，将边距 和 边框添加到该 DIV，而不是单元格。 很久以前发过一个CSS解决方案（今天更新了）：***.com/a/21551008/2827823【参考方案8】：你可以这样做：
<html>
<table>
<tr>
<td>one</td>
<td ></td>
<td>two</td>
</tr>
</table>
</html>
不需要 CSS :) 这 10 像素是您的空间。
【讨论】：
这个不错，简单有效，谢谢提醒+1 这不是分离结构和样式的好方法。这不是是否需要 CSS 的问题 - CSS 应该用于这样的事情。 不应该是如果您可以控制表格的宽度，请在所有表格单元格上插入一个 padding-left 并在整个表格上插入一个负 margin-left。
table
margin-left: -20px;
width: 720px;
table td
padding-left: 20px;
注意，表格的宽度需要包括填充/边距宽度。以上面为例，表格的可视宽度为700px。
如果您在表格单元格上使用边框，这不是最佳解决方案。
【讨论】：
【参考方案10】：如果你不能使用填充（例如你在 td 中有边框）试试这个
table
border-collapse: separate;
border-spacing: 2px;
【讨论】：
您可以查看有关border-collapse的更多信息：在此处单独css-tricks.com/almanac/properties/b/border-collapse【参考方案11】：试试padding-right。不允许在单元格之间放置margin。
<table>
<tr>
<td style="padding-right: 10px;">one</td>
<td>two</td>
</tr>
</table>
【讨论】：
【参考方案12】：将此应用于您的第一个<td>：
padding-right:10px;
HTML 示例：
<table>
<tr>
<td style="padding-right:10px">data</td>
<td>more data</td>
</tr>
</table>
【讨论】：
更好的方法是使用border-collapse:seperate 以防万一有人在上面的评论中复制/粘贴边框折叠技术，它应该是border-collapse: separate（上面separate的拼写有错别字）
另外，如果你想定义边框之间的空间量，你将不得不使用border-spacing: 5px;
border-spacing 还会在行之间添加空格。不幸的是，垂直和水平间距没有单独的属性。
border-spacing 接受两个参数 - 一个用于水平，一个用于垂直。【参考方案13】：
按照 Cian 设置边框代替边距的解决方案，我发现您可以将边框颜色设置为透明以避免与背景颜色匹配。适用于 FF17、IE9、Chrome v23。如果您也不需要实际的边框，这似乎是一个不错的解决方案。
【讨论】：
【参考方案14】：不幸的是，边距在单个单元格上不起作用，但是您可以在要在其之间放置空格的两个单元格之间添加额外的列...另一种选择是使用与背景颜色相同的边框...
【讨论】：
似乎边框与填充有相同的问题 - 它在单元格内容和边界之间添加空间，而不是在边界之外。【参考方案15】：我意识到这已经很晚了，但为了记录，您也可以使用 CSS 选择器来执行此操作（消除对内联样式的需要。）此 CSS 将填充应用于每一行的第一列：
table > tr > td:first-child padding-right:10px
这将是你的 HTML，没有 CSS！：
<table><tr><td>data</td><td>more data</td></tr></table>
这允许更优雅的标记，尤其是在您需要使用 CSS 进行大量特定格式设置的情况下。
【讨论】：
【参考方案16】：您不能以这种方式单独列出单元格中的各个列。在我看来，您最好的选择是在第二列添加 style='padding-left:10px' 并将样式应用于内部 div 或元素。这样您就可以实现更大空间的错觉。
【讨论】：
以上是关于CSS 单元格边距的主要内容，如果未能解决你的问题，请参考以下文章