How to put spacing between TBODY elements with CSS?

Spread the love

Sometimes, we want to put spacing between TBODY elements with CSS.

In this article, we’ll look at how to put spacing between TBODY elements with CSS.

How to put spacing between TBODY elements with CSS?

To put spacing between TBODY elements with CSS, we set the border-spacing property.

For instance, we write

<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>

to add a table.

Then we write

table {
  border-spacing: 0px 10px;
}

to set the border-spacing to the horizontal and vertical spacing of the rows.

Conclusion

To put spacing between TBODY elements with CSS, we set the border-spacing property.

Leave a Reply

Your email address will not be published. Required fields are marked *