Tables collapsing

How to merge multiple tables with pure CSS and no classes

HTML

<div>
     <h3>Fragment 1 (one table)</h3>

    <table class="foobar">
        <tr>
            <td>stuff</td>
            <td>stuff2</td>
            <td>stuff3</td>
        </tr>
        <tr>
            <td>stuff4</td>
            <td>stuff5</td>
            <td>stuff6</td>
        </tr>
    </table>
</div>
<div>
     <h3>Fragment 2 (two tables with  collapsed borders)</h3>

    <table class="foo">
        <tr>
            <td>more stuff</td>
            <td>more stuff2</td>
        </tr>
        <tr>
            <td>more stuff3</td>
            <td>more stuff4</td>
        </tr>
    </table>
    <table class="bar">
        <tr>
            <td>whatever</td>
        </tr>
        <tr>
            <td>whatever2</td>
        </tr>
        <tr>
            <td>whatever3</td>
        </tr>
    </table>
</div>
<div>
     <h3>Fragment 1 and Fragment 2 together (three tables with collapsed borders)</h3>

    <table class="foobar">
        <tr>
            <td>stuff</td>
            <td>stuff2</td>
            <td>stuff3</td>
        </tr>
        <tr>
            <td>stuff4</td>
            <td>stuff5</td>
            <td>stuff6</td>
        </tr>
    </table>
    <table class="foo">
        <tr>
            <td>more stuff</td>
            <td>more stuff2</td>
        </tr>
        <tr>
            <td>more stuff3</td>
            <td>more stuff4</td>
        </tr>
    </table>
    <table class="bar">
        <tr>
            <td>whatever</td>
        </tr>
        <tr>
            <td>whatever2</td>
        </tr>
        <tr>
            <td>whatever3</td>
        </tr>
    </table>
</div>

CSS

table {
    border-collapse: collapse;
    border: 4px solid black;
    margin-top: 20px;
    margin-bottom: 20px;
}
table + table {
    margin-top: 0;
    border-top: none;
}
table:not(:last-child) {
    border-bottom: none;
    margin-bottom: 0;
}

td {
    border-right: 1px solid silver;
    padding: 5px;
}


/* SHOWCASE ONLY */
.foobar {
    border-color: dodgerBlue;
}
.foo{
    border-color: orange; 
}
.bar{
    border-color: yellowgreen; 
}


table {
    width: 80%;
}
table:before {
    position: absolute;
    right: 30px;
    height: 50px;
    content:'← new table';
}
div{
    background: #efefef;
    margin-left: 10px;
    margin-right: 10px;
    padding-left: 10px;
    padding-right: 10px;
}
div:hover table, div:hover tr, div:hover td {
    border-color: #666 !important;
}
div table:hover, table:hover tr, table:hover td {
    background: yellow;    
}