JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>marges entre tbody&nbsp;: un test</title>
</head>
<body>

<table>
    <tbody>
        <tr>
            <td>test (width 20%)</td>
            <td>hopla (width 30%)</td>
            <td>schnapsum (width 50%)</td>
        </tr>
        <tr>
            <td>europa</td>
            <td>stork</td>
            <td>longdesc</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>schnapsum</td>
            <td>test</td>
            <td>stork</td>
        </tr>
        <tr>
            <td>hopla</td>
            <td>europa</td>
            <td>longdesc</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>test</td>
            <td>schnapsum</td>
            <td>europa</td>
        </tr>
        <tr>
            <td>stork</td>
            <td>longdesc</td>
            <td>hopla</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>europa</td>
            <td>stork</td>
            <td>hopla</td>
        </tr>
        <tr>
            <td>longdesc</td>
            <td>test</td>
            <td>schnapsum</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>hopla</td>
            <td>longdesc</td>
            <td>schnapsum</td>
        </tr>
        <tr>
            <td>test</td>
            <td>stork</td>
            <td>europa</td>
        </tr>
    </tbody>
</table>

    
</body>
</html>

CSS

table {
    position: relative;
    border-collapse: collapse;
    table-layout: fixed;
}

tbody,
tbody + tbody + tbody {
    position:relative;
    left: 0;
    display: inline-table; /* et non plus block; */
    width: 100%; /* en-dessous de 50% les tbody peuvent se retrouver sur la même ligne de texte : dans "inline-table" il y a inline ! */
    background: lightblue;
    color: black;
    border-left: none;
}
tbody + tbody + tbody {
    top: 20px;
}

tbody + tbody {
    position:relative;
    top: 10px;
    background-color: yellow;
    border-left: 40px solid hsl(240, 80%, 40%);
    background: -moz-linear-gradient(left, hsl(240, 80%, 40%), hsl(0, 80%, 30%));
    color: white;
}

td,
tbody+tbody+tbody td {
    padding: 4px 6px;
    border: 1px solid #444;
}

tbody + tbody td {
    border: 2px dashed white;
}

/* vérifions que table-layout: fixed; est respecté par le moteur de rendu */
td:first-child { width: 20%; }
td { width: 30%; }
td:last-child { width: 50%; }