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

Question

我有这样一张桌子:

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

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

Answer 1

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

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

}

Answer 2

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

<style>
table {
  border-collapse: collapse;
}

table tbody {
  border-top: 15px solid white;
}
</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Answer 3

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

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

    .separator{
             height: 50px;
    }

   <table>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>

           <tr class="separator" colspan="2"></tr>

           tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
           <tr><td>Cell 1</td><td>Cell 2</td></tr>
   </table>

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

tr{
   height: 40px;
}

Answer 4

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

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

<tbody>
    <tr>
        <td>td 1</td>
        <td rowspan"2">td 2</td>
        <td>td 3</td>
        <td>td 4</td>
    </tr>
    <tr>
        <td>td 1</td>
        <td>td 2</td>
        <td>td 4</td>
    </tr>
</tbody>

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

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

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

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

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

这是一个小提琴

Answer 5

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

<style>
table {
  border-collapse: collapse;
}

td {
  border: 1px solid black;
}

tbody tr:first-child td {
  padding-top: 15px;
}

</style>

<table>
    <tfoot>
        <tr><td>footer</td></tr>
    </tfoot>
    <tbody>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
        <tr><td>Body 1</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
        <tr><td>Body 2</td></tr>
    </tbody>
    <tbody>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
        <tr><td>Body 3</td></tr>
    </tbody>
</table>

Answer 6

设置display为block,它将工作.

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