JSFiddle - React, Tailwind, and code Playground

HTML

<div id="horseStable" class="table tableC_StableDetails">
    <table cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th class="horse">Horse</th>
                <th class="today">Races Today</th>
                <th colspan="4" class="alerts">Race Alerts</th>
                <th class="action"><div class="toggle collapsed">&nbsp;</div></th>
            </tr>
            <tr>
                <th class="horse">&nbsp;</th>
                <th class="today">&nbsp;</th>
                <th class="entry"><div title="Advanced notice of upcoming races" class="tip">Entry<div></div></div></th>
                <th class="raceday"><div title="Reminders sent 20 MTP" class="tip">Race Day</div></th>
                <th class="result"><div title="Final race results, as soon as they're available" class="tip">Result</div></th>
                <th class="alertAction">&nbsp;</th>
                <th class="action">&nbsp;</th>
            </tr>
        </thead>
        <tbody id="horseStableBody" class="clearFloat tableBody">
            <tr class="rowEven">
                <td class="horse"><div class="ename">Arrrrr</div></td>
                
                <td class="today">None</td>
                <td class="entry"><span class="alert on"></span></td>
                <td class="raceday"><span class="alert on"></span></td>
                <td class="result"><span class="alert on"></span></td>
                <td class="alertAction"><a class="horseToggleAlert" href="#">Manage</a></td>
                <td class="action"><a id="remove:775ce8ae-9ce7-4ffd-ba11-2d3f9e518abc:1:horse" class="action removeEntity" name="Arrrrr" href="#">Remove horse</a>
                    
                </td>
            </tr>
            <tr class="rowOdd">
                <td class="horse"><div class="ename">Doinksspecialbunny</div></td>
                
                <td class="today">None</td>
                <td class="entry"><span class="alert on"></span></td>
...

CSS

.tableC_StableDetails table thead { cursor: pointer;}
.tableC_StableDetails table { border: 1px solid #67686A; overflow: auto; position: relative; border-collapse: collapse;}
.tableC_StableDetails table thead tr { height: 25px; font-size:1.2em;
    background-repeat:repeat-x;
    border-bottom:1px solid #67686a;}
.tableC_StableDetails table thead .action   { vertical-align: middle;}
.tableC_StableDetails table thead, 
.tableC_StableDetails table tbody   { overflow: hidden; position: relative;}
.tableC_StableDetails table .rowOdd     { background-color:white;font-size:1.2em;}
.tableC_StableDetails table .rowEven    { background-color:#f1f2f2;font-size:1.2em;}
.tableC_StableDetails table td          { vertical-align: middle; padding: 2px 0;}
.tableC_StableDetails table td a        {display: inline;}
.tableC_StableDetails table td img      { vertical-align: middle;}
.tableC_StableDetails table .horse,.tableC_StableDetails table .jockey,.tableC_StableDetails table .trainer,
.tableC_StableDetails table .owner 
{ width:238px; font-weight:bold; line-height: 25px; text-indent: 8px; border-right: 1px solid #C2C9CC;}
.tableC_StableDetails table .horse .ename    {float: left; display: inline; } 
.tableC_StableDetails table .horse a    {float: right; display: inline; padding: 0 8px;}
.tableC_StableDetails table .horse a img   {vertical-align: sub; }
.tableC_StableDetails table .today  { width:108px; border-right: 1px solid #C2C9CC; padding-left: 8px;}
.tableC_StableDetails table .alerts { width:198px; border-right: 1px solid #C2C9CC; text-indent: 2px;}
.tableC_StableDetails table td .alert { background: url(/_images/global/check.png) no-repeat; 
    width:16px; height: 16px; display: block; margin: 0 auto;}
.tableC_StableDetails table td .off { background: url(/_images/global/cancel.png) no-repeat; }
.tableC_StableDetails table .entry  { width:35px; text-align: center;border-right: 1px solid #C2C9CC;}
.tableC_StableDetails table .raceday{ width:60px; text-align:...

JavaScript

var tbid = '#horseStableBody';

$('#horseStable table thead').toggle(function() {
    hideTableBody(tbid);
}, function() {
    showTableBody(tbid);
});

function showTableBody(tbid) {
    $(tbid).children("tr").show().children("td").children("div").slideDown(600, function() {
        $(this).replaceWith($(this).contents());
    });
}

function hideTableBody(tbid) {
    $(tbid).children("tr").children("td").wrapInner("<div />").children("div").slideUp(600, function() {
        $(this).parent().parent().hide();
    });
}