JSFiddle - React, Tailwind, and code Playground

by Kaleb Hornsby

HTML

<figure class="Table">
    <table>
        <caption class="Table-header">Top Caption</caption>
        <thead>
            <tr>
                <td></td>
                <th>A</th>
                <th>B</th>
                <th>C</th>
                <th>D</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th scope="row">Sum</th>
                <td>1111</td>
                <td>2222</td>
                <td>3333</td>
                <td>4444</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <th scope="row">10</th>
                <td>10</td>
                <td>20</td>
                <td>30</td>
                <td>40</td>
            </tr>
            <tr>
                <th scope="row">100</th>
                <td>100</td>
                <td>200</td>
                <td>300</td>
                <td>400</td>
            </tr>
            <tr>
                <th scope="row">1000</th>
                <td>1000</td>
                <td>2000</td>
                <td>3000</td>
                <td>4000</td>
            </tr>
        </tbody>
    </table>
    <figcaption class="Table-footer">Bottom Caption</figcaption>
</figure>
<table class="Table">
    <caption class="Table-header">Top Caption</caption>
    <caption class="Table-footer">Bottom Caption</caption>
    <thead>
        <tr>
            <td></td>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th scope="row">Sum</th>
            <td>1111</td>
            <td>2222</td>
            <td>3333</td>
            <td>4444</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>1</td>
           ...

SCSS

.Table {
    margin: 1em 0;
}

table.Table,
.Table > table {
    width: 100%;
    border-collapse: collapse;

    > thead > tr,
    > tfoot > tr,
    > tbody > tr {
        > td,
        > th {
            text-align: left;
            border: 1px solid black;
            padding: .25em;
        }
    }
}

.Table-header,
.Table-footer {
    border: 1px black;
    text-align: center;
    padding: .25em;
}

.Table-header {
    caption-side: top;
    border-style: solid solid none;
    border-radius: 4px 4px 0 0;
}
.Table-footer {
    caption-side: bottom;
    border-style: none solid solid;
    border-radius: 0 0 4px 4px;
}