CSS Cell Margin

Tom*_*Tom 87 html css margin cell css-tables

在我的HTML文档中,我有一个包含两列和多行的表.如何用css增加第一列和第二列之间的空间?我试过申请"保证金权利:10px;" 到左侧的每个单元格,但没有效果.

rav*_*avi 149

一句警告:尽管padding-right可能会解决您的特定(视觉)问题,但这不是表格单元格之间添加间距的正确方法.什么padding-right确实的细胞类似于它做什么其他大多数元素:它增加了空间的单元格.如果单元格没有边框或背景颜色或其他让游戏离开的东西,这可以模仿在单元格之间设置空间的效果,但不能.

正如有人指出的那样,表格单元格会忽略边距规范:

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

内部表元素生成带有内容和边框的矩形框.细胞也有填充物.内部表元素没有边距.

那么"正确"的方式是什么?如果您要替换cellspacing表的属性,则border-spacing(已border-collapse禁用)是替换.但是,如果需要每单元格"边距",我不确定如何使用CSS正确实现.我能想到的唯一的黑客就是padding如上所述使用,避免细胞的任何样式(背景颜色,边框等),而是在单元格内使用容器DIV来实现这样的样式.

我不是CSS专家,所以我在上面可能是错的(这将是很好的知道!我也想要一个表格单元边缘CSS解决方案).

干杯!


rom*_*n m 84

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

padding-right:10px;
Run Code Online (Sandbox Code Playgroud)

HTML示例:

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>
Run Code Online (Sandbox Code Playgroud)

  • 为了防止有人复制/粘贴边界崩溃技术上面的评论,它应该是'border-collapse:separate`(上面的`separate`的拼写中有一个拼写错误) (18认同)
  • 一个更好的方法是使用边界崩溃:单独的 (11认同)
  • “border-spacing”有两个参数 - 一个用于水平,一个用于垂直。 (4认同)

小智 25

如果你不能使用填充(例如你在td中有边框)试试这个

table { 
           border-collapse: separate;
           border-spacing: 2px;
}
Run Code Online (Sandbox Code Playgroud)

  • 您可以查看有关边界折叠的更多信息:请点击此处http://css-tricks.com/almanac/properties/b/border-collapse/ (3认同)

小智 14

我意识到这是相当迟钝的,但是对于记录,你也可以使用CSS选择器来做到这一点(不需要内联样式.)这个CSS将填充应用于每一行的第一列:

table > tr > td:first-child { padding-right:10px }
Run Code Online (Sandbox Code Playgroud)

这将是你的HTML,没有CSS!:

<table><tr><td>data</td><td>more data</td></tr></table>
Run Code Online (Sandbox Code Playgroud)

这样可以实现更优雅的标记,尤其是在需要使用CSS进行大量特定格式化的情况下.


小智 14

不幸的是,在单个单元格上边距不起作用,但是你可以在两个单元格之间添加额外的列,你想在它们之间放置一个空格......另一种选择是使用与背景颜色相同的边框...

  • +1用于建议具有相同背景颜色的边框 (4认同)

小智 9

你可以这样做:

<html>
<table>
    <tr>
        <td>one</td>
        <td width="10px"></td>
        <td>two</td>
    </tr>
</table>
</html>
Run Code Online (Sandbox Code Playgroud)

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

  • 这不是分离结构和造型的好方法.这不是CSS是否需要的情况 - CSS应该用于这样的事情. (8认同)

mpe*_*pen 7

试试padding-right.你不被允许放在margin牢房之间.

<table>
   <tr>
      <td style="padding-right: 10px;">one</td>
      <td>two</td>
   </tr>
</table>
Run Code Online (Sandbox Code Playgroud)