How to Put Spacing Between Tbody Elements

How to put spacing between TBODY elements

Try this, if you don't mind not having borders.

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

Spacing between thead and tbody

I think I have it in this fiddle and I updated yours:

tbody:before {
    content: "-";
    display: block;
    line-height: 1em;
    color: transparent;
}

EDIT better & simpler:

tbody:before {
    content:"@";
    display:block;
    line-height:10px;
    text-indent:-99999px;
}

This way text is really invisible

Borders and margin between thead and tbody

You can use outline: thin solid to set the tbody and thead borders

thead {  outline: thin solid red;}
tbody {  outline: thin solid green;}
td{  padding-top: 20px;}

<table>  <thead>    <tr>      <th scope="col">Thumbnail</th>      <th scope="col">Title</th>      <th scope="col">Date Created</th>      <th scope="col">View</th>      <th scope="col">Edit</th>      <th scope="col">Delete</th>    </tr>  </thead>  <tbody>    <tr>      <td><img src="https://picsum.photos/25/25/?random&r=1" /></td>      <td>Lorem ipsum</td>      <td>Nov 3, 2017</td>      <td>Icon-View</td>      <td>Icon-Edit</td>      <td>Icon-Delete</td>    </tr>  </tbody></table>

Eliminate gap between tbody tags

Looks like adding border-spacing: 0; to your table elements will help. Without this, there's 2 pixels surrounding each of the borders, which means there's 4 pixels between the tables.

How to remove extra border spacing between TBODY elements?

Note: This is a Webkit-specific bug. (Not present in Firefox, and as usual IE won't even load jsFiddle to test it.)

Unfortunately, there is no way to properly fix this. There is an open question on this very topic already. Additionally, there is an open bug report since Chrome 8 which has been confirmed to exist through Chrome 20 (and I can confirm in Chrome 25). There is also an open Webkit bug thread on this matter, which is still "NEW".

To be honest, I can't even find a workaround for this. Playing with border-spacing, margin, and even position don't seem to have an effect on this.

---

Related Topics