CSS Cell Margin

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

1> ravi..：

---

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

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

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

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

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

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

干杯!

2> roman m..：

---

将此应用于您的第一个:

padding-right:10px;

HTML示例:

   

      
data
      
more data
   

---

为了防止有人复制/粘贴边界崩溃技术上面的评论,它应该是'border-collapse:separate`(上面的`separate`的拼写中有一个拼写错误)

---

一个更好的方法是使用边界崩溃:单独的

3> 小智..：

---

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

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

---

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

4> 小智..：

---

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

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

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

data
more data

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

5> 小智..：

---

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

---

+1用于建议具有相同背景颜色的边框

6> 小智..：

---

你可以这样做:

    

        
one
        

        
two
    

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

---

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

7> mpen..：

---

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

   

      
one
      
two