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("tr").each(function () {
            var i = 0;
            $(this).find("td").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);
        });
    });

    return false;
}
$("a").click(function () {
    tableTransform($("#ucTableTrend_0_gvData_0"));
});