JSFiddle - React, Tailwind, and code Playground

HTML

<table id="current" class="clear" cellspacing="0">
            <thead>
                <tr>
                    <th></th>
                    <th>Updated</th>
                    <th>Zone</th>
                    <th>Act. Start</th>
                    <th>Act End</th>
                    <th>%RT</th>
                    <th>% Gal</th>
                    <th>Status</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><button type="button" class="third expand" alt="1">+</button></td>
                    <td>8/1/10 11:30pm</td>
                    <td>B-Z01</td>
                    <td>8/1/10 9:34pm</td>
                    <td>8/1/10 11:30pm</td>
                    <td>100%</td>
                    <td>85.6%</td>
                    <td width="130">Status</td>
                    <td><img src="" class="icon" alt="" height="18" width="18" /></td>
                </tr>
            </tbody>
            <tbody class='collapse' id="expand_1">
                <tr>
                    <th></th>
                    <th colspan="2"></th>
                    <th>Sche. Start</th>
                    <th>Sche. End</th>
                    <th>Gal App</th>
                    <th>Gal Exp</th>
                    <th>End Reason</th>
                </tr>
                <tr>
                    <td></td>
                    <td colspan="2"><button type="button" class="second">New schedule</button></td>
                    <td>8/1/10 9:34pm</td>
                    <td>8/1/10 11:30pm</td>
                    <td>171</td>
                    <td>200</td>
                    <td>End of Schedule</td>
                </tr>
            </tbody>
        </table>

CSS

table#current tr{
}
table#current th{
    border-top: 0 !important;
}
table#current th, table#current td{
    text-align: left;
    padding: 10px 2px;
    border-top: 1px solid #B7B7B7;
}
#current th{
    font-size: 14px;
}
#current .collapse{
    padding-bottom: 10px;
}
#current .collapse th{
font-size:    12px;
font-weight: bold;
color:    #474747;
padding: 10px 2px 5px;
}
table#current .collapse{
    display: none;
}
table#current button.second:hover{
background: #2a9de0; /* Old browsers */
background: -moz-linear-gradient(top, #2a9de0 0%, #077dc4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a9de0), color-stop(100%,#077dc4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2a9de0 0%,#077dc4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #2a9de0 0%,#077dc4 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #2a9de0 0%,#077dc4 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a9de0', endColorstr='#077dc4',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #2a9de0 0%,#077dc4 100%); /* W3C */
color: #fff;
}
table#current button.second{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:    bold;
color: #000000;
padding: 2px;
border: 1px solid #b7b7b7;
-webkit-box-shadow: 0px 0px 1px 0px #b7b7b7;
-moz-box-shadow: 0px 0px 1px 0px #b7b7b7;
box-shadow: 0px 0px 1px 0px #b7b7b7; 
border-radius: 3px;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */
filter:...

JavaScript

$(document).ready(function() {
    $('.expand').toggle(function(){
        var exp = $(this).attr('alt');
        $('#expand_'+exp).slideDown("slow");
        $(this).text('-');
        }, 
        function(){
        var exp = $(this).attr('alt');
        $('#expand_'+exp).slideUp('slow');
        $(this).removeClass('contract').addClass('expand').text('+');
    });
});