logo标签列表

CSS单元格边距

htmlcsscellmargincss-tables
123
在我的HTML文档中，有一个包含两列和多行的表格。如何使用CSS增加第一列和第二列之间的间距？我尝试将“margin-right: 10px;”应用于左侧的每个单元格，但没有效果。
这里有一个很好的CSS解决方案，最近更新：https://dev59.com/NnRB5IYBdhLWcg3wHkPi#21551008 - Asons
16个回答
165
警告：虽然 padding-right 可以解决你的特定（视觉）问题，但这不是添加表格单元格间距的正确方法。对于单元格，padding-right 的作用类似于它对大多数其他元素的作用：它增加了单元格内部的空间。如果单元格没有边框、背景颜色或其他显示出差异的东西，那么这可以模仿设置单元格间距的效果，否则不行。
正如有人指出的那样，表格单元格会忽略 margin 规范： CSS 2.1 规范 - 表格 - 表格内容的可视化布局 引用：

内部表格元素生成带有内容和边框的矩形框。单元格也有填充。内部表格元素没有外边距。

那么什么是“正确”的方法？如果您想替换表格的 cellspacing 属性，则 border-spacing（使用 border-collapse 禁用）是一种替代方法。但是，如果需要每个单元格的“margins”，我不确定如何使用 CSS 正确实现。我能想到的唯一的hack 是像上面那样使用 padding，避免对单元格进行任何样式设置（背景色、边框等），而是在单元格内使用容器 DIV 实现这样的样式。
我不是 CSS 专家，所以我以上可能是错误的（如果是，那就太好了！我也想知道有关表格单元格 margin 的 CSS 解决方案）。
这对于填充来说非常好，但是外边距呢？我想在包含边框的单元格外添加空间。Margin CSS 似乎对单元格没有影响。 - Levitikon
1
Levitikon，没错 - 边距不起作用是由于上述原因。据我所知，实现你想要的唯一方法是将单元格内容包装在 DIV 中，在该 DIV 上添加边距和边框，而不是在单元格上添加。 - ravi
我很久以前（今天更新）发布了一个CSS解决方案：https://dev59.com/NnRB5IYBdhLWcg3wHkPi#21551008 - Asons
114

将此应用于您的第一个 <td>：

padding-right:10px;

HTML示例：

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>
14
更好的做法是使用border-collapse: separate来实现，这样可以使边框分隔开。 - Gaurav Ramanan
23
以防有人在复制/粘贴上述评论中的border-collapse技术，应该使用"border-collapse: separate"（上面单词的拼写有误）。请注意更正。 - Tony DiNitto
1
另外，如果您想定义边框之间的间距量，您将需要使用 border-spacing: 5px;。 - Sølve T.
border-spacing 还会在行之间添加空间。不幸的是，没有单独控制垂直和水平间距的属性。 - Lee Blake
4
border-spacing 需要两个参数 - 一个用于水平方向，另一个用于垂直方向。 - OldTinfoil
35

如果您无法使用填充（例如您在td中有边框），请尝试以下方法

table { 
           border-collapse: separate;
           border-spacing: 2px;
}
3
您可以在此处查看更多有关分离边框(border-collapse: separate)的内容：http://css-tricks.com/almanac/properties/b/border-collapse/。 - Gaurav Ramanan
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 进行大量具体格式化的情况下。

15

很不幸，margin在单独的单元格上不起作用，但是您可以在想要之间添加额外的列以间隔两个单元格之间...另一个选项是使用与背景相同颜色的边框...

似乎边框与填充存在相同的问题 - 它们在单元格内容和边界之间添加空间，而不是在边界外部。 - stewbasic
13

您可以简单地这样做：

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

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

这很好，简单而有效，谢谢你提醒我 +1 - Hayden Thring
8
这种不分离结构和样式的方法并不好。这不是关于是否需要 CSS 的问题 - 对于这样的事情应该使用 CSS。 - Simon Robb
不应该是<td style="width:10px;"></td>。 - Rune Jeppesen
1
记住，最简单的解决方案是最好的。使用内联样式的方法也很不错 :) - trebor
它适用于我的特定情况。非常有创意。谢谢。 - Linh
9
尝试使用“padding-right”。禁止在单元格之间放置“margin”。
<table>
   <tr>
      <td style="padding-right: 10px;">one</td>
      <td>two</td>
   </tr>
</table>
4
这个解决方案适用于需要同时使用边框和填充进行样式设置的元素。
(已在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 *）。 - Necreaux
4

使用 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>
3

以这种方式无法单独选定单元格中的各列。在我看来，最好的选择是在第二列上添加style='padding-left:10px'，并在内部div或元素上应用样式。这样，您可以实现更大空间的幻象。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接