如何在TBODY元素之间放置间距

我有这样一张桌子:

    

        
footer
    
    

        
Body 1
        
Body 1
        
Body 1
    
    

        
Body 2
        
Body 2
        
Body 2
    
    

        
Body 3
        
Body 3
        
Body 3
    

我想在每个tbody元素之间加一些间距,但填充和边距没有影响.有任何想法吗？

1> 小智..：

---

这样的东西会起作用,具体取决于您的浏览器支持要求:

tbody::before
{
  content: '';
  display: block;
  height: 15px;

}

2> Dave Jensen..：

---

试试这个,如果你不介意没有边框.

    

        
footer
    
    

        
Body 1
        
Body 1
        
Body 1
    
    

        
Body 2
        
Body 2
        
Body 2
    
    

        
Body 3
        
Body 3
        
Body 3
    

---

尝试border-top:15px实心透明;

---

如果你的身体有彩色边框,则不起作用

3> kevtrout..：

---

关于使用空表元素来布局页面,人们总是会有争议的意见(正如这个答案的downvote所证明的那样).我认识到这一点,但有时当你以" 快速而肮脏 "的方式工作时,这种方式更容易使用它们.

我在过去的项目中使用了空行来表空间表行.我为间隔行分配了一个自己的css类,并为该类定义了一个高度,该高度充当该组表行的顶部和底部边距.

    .separator{
             height: 50px;
    }

   

           tr>

           
Cell 1
Cell 2
           
Cell 1
Cell 2
           
Cell 1
Cell 2

           


           
Cell 1
Cell 2
           
Cell 1
Cell 2
           
Cell 1
Cell 2

           
Cell 1
Cell 2
           
Cell 1
Cell 2
           
Cell 1
Cell 2
   

如果表格单元格上没有边框,则还可以为样式表中的典型单元格或行定义高度,以均匀地分隔表格的所有行.

tr{
   height: 40px;
}

---

Downvote你想要的一切,但这是唯一没有缺点的解决方案 - 即使它确实违反了分离,一个空行也不是一件大不了的IMO.

---

没有缺点,我的屁股!尝试使用屏幕阅读器并注意不正确的行数.更好的是,尝试将表格复制并粘贴到电子表格中.如果你有很多内容,你会重新格式化几个小时.表用于显示数据(并且非常易于访问),而不是部分之间的填充表示.

4> Nineoclick..：

---

我一直遇到麻烦,在一些浏览器中包含带有rowspan的伪数据时,它与多个::before伪有间隔.

基本上,如果你有这样的结构:

    
        td 1
        td 2
        td 3
        td 4
    
    
        td 1
        td 2
        td 4
    

你跟随谁建议写这样的::before伪元素css :

tbody::before
{
    content: '';
    display: block;
    height: 10px;
}

这将影响rowspan,使得表在第二个中"丢失" 多少个-rowpan存在于第一个中.

因此,如果有人遇到这种类型的问题,解决方案是以::before这种方式设置伪样式:

tbody::before
{
    content: '';
    display: table-row;
    height: 10px;
}

这是一个小提琴

5> Dave Jensen..：

---

这是另一种依赖的可能性:所有浏览器都没有的第一个孩子:

    

        
footer
    
    

        
Body 1
        
Body 1
        
Body 1
    
    

        
Body 2
        
Body 2
        
Body 2
    
    

        
Body 3
        
Body 3
        
Body 3
    

---

如果你有任何事情恰好依赖于内容相对于单元格大小的位置,比如盒子阴影,背景图像或其他任何东西,那么这个效果不会很好.

6> user007..：

---

设置display为block,它将工作.

table tbody{
    display:block;
    margin-bottom:10px;
    border-radius: 5px;
}

---

`display:block`打破了tbody元素之间的列对齐.您不再受益于表格布局引擎