单元格边距

在我的 HTML 文档中，我有一个包含两列和多行的表。如何使用 css 增加第一列和第二列之间的空间？我试过对左边的每个单元格应用“右边距: 10px;”，但是没有效果。

443338 次浏览
小开

尝试 padding-right。你不允许把 margin的细胞之间。

<table>
<tr>
<td style="padding-right: 10px;">one</td>
<td>two</td>
</tr>
</table>
小开
最佳答案

将这个应用到你的第一个 <td>:

padding-right:10px;

HTML 例子:

<table>
<tr>
<td style="padding-right:10px">data</td>
<td>more data</td>
</tr>
</table>
小开

不能以这种方式单独列出单元格中的单个列。在我看来，最好的选择是在第二列中添加 style='padding-left:10px'，并将样式应用于内部 div 或元素。这样你可以得到一个更大的空间的幻觉。

小开

我知道这是相当迟的，但为了记录，您也可以使用 CSS 选择器来做到这一点(消除了内联样式的需要。)这个 CSS 将填充应用到每一行的第一列:

table > tr > td:first-child { padding-right:10px }

这将是您的 HTML，没有 CSS! :

<table><tr><td>data</td><td>more data</td></tr></table>

这允许更优雅的标记，特别是在需要使用 CSS 进行大量特定格式设置的情况下。

小开

A word of warning: though padding-right might solve your particular (visual) problem, it is not the right way to add spacing 中间 table cells. What padding-right does for a cell is similar to what it does for most other elements: it adds space 内心 the 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.

正如有人指出的，表单元格的边距规范被忽略:

CSS 2.1规范-表格-表格内容的视觉布局

生成内部表元素 装有内容和 细胞也有填充物。 内部表元素没有 利润。

那“正确”的方法是什么？如果您想替换表的 cellspacing属性，那么 border-spacing(禁用 border-collapse)是一个替换。但是，如果每个单元格的“边距”是必需的，我不确定如何能够正确地实现使用 CSS。我能想到的唯一一种方法是像上面那样使用 padding，避免任何单元格样式(背景颜色、边框等) ，而是在单元格内部使用容器 DIV 来实现这种样式。

我不是一个 CSS 专家，所以我很可能是错误的在上面(这将是伟大的知道!)！我也想一个表格单元格边距 CSS 解决方案)。

干杯！

小开

不幸的是，边距不适用于单个单元格，但是您可以在两个单元格之间添加额外的列，您希望在... ... 之间放置一个空格... ... 另一种选择是使用与背景颜色相同的边框... ..。

小开

按照 Cian 的解决方案，用边框代替边距，我发现可以将边框颜色设置为透明，以避免必须与背景颜色匹配。在 FF17，IE9，Chrome v23中工作。看起来是个不错的解决方案前提是你不需要真正的边界。

小开

如果不能使用填充(例如，td 中有边框) ，请尝试这样做

table {
border-collapse: separate;
border-spacing: 2px;
}
小开

如果您可以控制表格的宽度，那么在所有表格单元格上插入一个左边距，并在整个表格上插入一个负边距。

table {
margin-left: -20px;
width: 720px;
}


table td {
padding-left: 20px;
}

注意，表的宽度需要包括填充/边距宽度。以上面的例子为例，该表的视觉宽度为700px。

如果在表单元格上使用边框，这不是最佳解决方案。

小开

你可以简单地这样做:

<html>
<table>
<tr>
<td>one</td>
<td width="10px"></td>
<td>two</td>
</tr>
</table>
</html>

不需要 CSS:)这10px 是你的空间。

小开

解决方案

我发现解决这个问题的最好办法是结合反复试验和阅读之前写的东西:

Http://jsfiddle.net/mg4hd/


正如你所看到的，我有一些相当棘手的事情要做... ... 但是让这个看起来不错的主要原因是:

父元素(UL) : 边界折叠: 分开; 边界间距: .25 em; 左边距: -.25 em;
子元素(LI) : 显示: 表单元格; 垂直对齐: 中间;

超文本标示语言

<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; }
小开

This solution work for td's that need both border and padding for styling.
(在 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>

小开

使用 边界崩溃: 分离;对我来说不起作用，因为我只需要表格单元格之间的空白，而不是表格两侧的空白。

I came up with the next solution:

-CSS

.tableDiv{
display: table;
}


.cellSeperator {
display: table-cell;
width: 20px;
}


.cell1 {
display: table-cell;
width: 200px;
}


.cell2 {
display: table-cell;
width: 50px;
}

超文本标示语言

<div class="tableDiv">
<div class="cell1"></div>
<div class="cellSeperator"></div>
<div class="cell2"></div>
</div>
小开 

<!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>通过宽度设置边距。上面的填充解决方案没有一个对我有效，因为我试图给单元格边界本身留出空白，这就是最终解决问题的方法:

<table>
<colgroup>
<col>
<col width="20px">
<col>
</colgroup>
<tr>
<td>data</td>
<td></td>
<td>more data</td>
</tr>
</table>

使用: nth-child 对表单元格的边框进行样式设置，以便第2列和第3列看起来是一个单独的列。

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; }

提交答案