JSFiddle - React, Tailwind, and code Playground

HTML

<div style="padding: 10px;">
    <div class="tablesorter TableScrollArea">
        <div>
            <table class="tablesorter" id="ucTableTrend_0_gvData_0" style="border-style:None;border-collapse:collapse;" cellspacing="0">
                <thead>
                    <tr>
                        <th>Month Ending</th>
                        <th>Operation Costs - Chemicals</th>
                        <th>Operation Costs - Labor</th>
                        <th>Operation Costs - Maintenance</th>
                        <th>Operation Costs - Total</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>September 2013</td>
                        <td class="currency Right" style="color: White; background-color: Green">$1,250</td>
                        <td class="currency Right" style="color: White; background-color: Green">$2,580</td>
                        <td class="currency Right" style="background-color: Yellow">$85</td>
                        <td class="currency Right" style="background-color: Yellow">$3,915</td>
                    </tr>
                    <tr>
                        <td>October 2013</td>
                        <td class="currency Right" style="color: White; background-color: Red">$1,485</td>
                        <td class="currency Right" style="color: White; background-color: Green">$2,080</td>
                        <td class="currency Right" style="background-color: Yellow">$75</td>
                        <td class="currency Right" style="background-color: Yellow">$3,640</td>
                    </tr>
                    <tr>
                        <td>November 2013</td>
                        <td class="currency Right" style="color: White; background-color: Red">$1,550</td>
                        <td class="currency Right" style="color: White; background-color: Red">$3,250</td>
                        <td class="currency Right"...

CSS

div.TableScrollArea {
    padding: 0px;
    overflow: auto;
    border: 1px solid #0F487F;
    border-radius: 0.3em;
    background-clip: border-box;
}
div.tablesorter {
    margin: 0px;
    padding: 0px;
    -webkit-box-shadow: 0 0 0.1em 0 gray;
    -moz-box-shadow: 0 0 0.1em 0 gray;
    box-shadow: 0 0 0.1em 0 gray;
    -webkit-border-radius: 0.3em;
    -moz-border-radius: 0.3em;
    border-radius: 0.3em;
    -moz-background-clip: border;
    -webkit-background-clip: border-box;
    background-clip: border-box;
}
table.tablesorter {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    cursor: default;
}
table.tablesorter tr {
    border-bottom: 1px solid #0f487f;
}
table.tablesorter tfoot tr {
    border-bottom: 0px;
}
table.tablesorter th {
    border-right: 1px solid White;
}
table.tablesorter td {
    border-right: 1px solid #0f487f;
}
table.tablesorter tr td:last-child, table.tablesorter tr th:last-child {
    border-right: 0px;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr td, table.tablesorter tfoot tr:hover td {
    color: White;
    font-weight: bold;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    background-color: #0f487f;
}
table.tablesorter th.header {
    background-image: url(../../Images/sort_both.png);
    cursor: pointer;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: center right;
    padding-right: 20px;
    margin-right: -1px;
}
table.tablesorter th.headerSortUp {
    background-image: url(../../Images/sort_desc.png);
    background-color: #3399ff;
}
table.tablesorter th.headerSortDown {
    background-image: url(../../Images/sort_asc.png);
    background-color: #3399ff;
}
table.tablesorter tbody tr:nth-child(2n+1) td {
    background-color: #eeeeee;
}
table.tablesorter tbody tr:hover td {
    color: White;
    background: #78b443;
    /* Old browsers */
    background: -moz-linear-gradient(top, #acd38a 0%, #78b443 100%);
    /* FF3.6+ */
   ...

JavaScript

function tableTransform(objTable) {
    objTable.each(function () {
        var $this = $(this);
        var newrows = [];
        $this.find("tbody tr, thead tr").each(function () {
            var i = 0;
            $(this).find("td, th").each(function () {
                i++;
                if (newrows[i] === undefined) {
                    newrows[i] = $("<tr></tr>");
                }
                newrows[i].append($(this));
            });
        });
        $this.find("tr").remove();
        $.each(newrows, function () {
            $this.append(this);
        });
    });
    //switch old th to td
    objTable.find('th').wrapInner('<td />').contents().unwrap();
    //move first tr into thead
    var thead = objTable.find("thead");
    var thRows = objTable.find("tr:first");
    var copy = thRows.clone(true).appendTo("thead");
    thRows.remove();
    //switch td in thead into th
    objTable.find('thead tr td').wrapInner('<th />').contents().unwrap();
    //add tr back into tfoot
    objTable.find('tfoot').append("<tr></tr>");
    //add tds into tfoot
    objTable.find('tbody tr:first td').each(function () {
        objTable.find('tfoot tr').append("<td>&nbsp;</td>");
    });
    return false;
}
$("a").click(function () {
    tableTransform($("#ucTableTrend_0_gvData_0"));
});