Tables collapsing

How to merge multiple tables with pure CSS and no classes

by AndreaLigios

HTML

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

    <table class="foo">
        <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="foo">
        <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-left: 4px solid dodgerBlue;
    border-right: 4px solid dodgerBlue;
    border-bottom: none;
    border-top: none;
    margin-top: 20px;
    margin-bottom: 20px;
}
table + table {
    margin-top: 0;
}
table:not(:last-child) {
    margin-bottom: 0;
}
tr {
    border: 1px solid dodgerBlue;
}
tr:first-child {
    border-top: 4px solid red;
}
table + table tr:first-child {
    border-top: 1px solid lime;
}
tr:last-child {
    border-bottom: 4px solid yellow;
}
table:not(:last-child) tr:last-child {
    border-bottom: none;
}
td {
    border-right: 1px solid silver;
    padding: 5px;
}
/* SHOWCASE ONLY */
 div:hover {
    background: #eee;
}
table {
    width: 80%;
}
table:before {
    position: absolute;
    right: 10px;
    height: 50px;
    content:'← new table';
}
div:hover table, div:hover tr, div:hover td {
    border-color: dodgerBlue !important;
}
div table:hover, table:hover tr, table:hover td {
    background: yellow;
    border-color: crimson !important;
}