JSFiddle - React, Tailwind, and code Playground

by markallgood

HTML

<table class="include">
    <thead>
        <tr>
            <th>Column A</th>
            <th>Column B</th>
            <th>Column C</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1A</td>
            <td>Row 1B</td>
            <td>Row 1C</td>
        </tr>
        <tr id="specialRow">
            <td>Row 2A</td>
            <td>Row 2B</td>
            <td>Row 2C</td>
        </tr>
        <tr>
            <td>Row 3A</td>
            <td>Row 3B</td>
            <td>Row 3C</td>
        </tr>
        <tr>
            <td>Row 4A</td>
            <td>Row 4B</td>
            <td>Row 4C</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total A</td>
            <td>Total B</td>
            <td>Total C</td>
        </tr>
    </tfoot>
</table>

<table class="ignore">
    <thead>
        <tr>
            <td>Do not include this</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Do not include this</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Do not include this</td>
        </tr>
    </tfoot>
</table>

CSS

body { padding:10px; }
th, td { padding:2px 10px; }
table.include { border:1px solid black; border-collapse:collapse; }
table.include thead th { background-color:darkblue; color:white; }
table.include tbody td {border-top:1px solid black; }
table.include tfoot th { background-color:silver; border-top:1px solid black;}
table.ignore { display:none; }

JavaScript

$("table.include tbody").sortable();