JSFiddle - React, Tailwind, and code Playground

by philphil

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<table id="tprogram" class="table table-striped table-hover ">
    <thead>
        <tr>
            <th class="icon_column"></th>
            <th>Program</th>
            <th>Location</th>
            <th>Time</th>
            <th>Dates</th>
            <th>Ages</th>
            <th>Cost</th>
            <th>Capacity</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-right">	<i class="btn btn-xs fa fa-list-ul" data-toggle="collapse" data-target=".collapsed1"></i>

            </td>
            <td>Inventors</td>
            <td>Lakeshore</td>
            <td>Thursdays 2:00pm - 3:00pm</td>
            <td>Jul 09 - Aug 13</td>
            <td>4 -6</td>
            <td>$18</td>
            <td>8/15</td>
            <td>

<table>
            
            
        <tr>
            <td class="text-right"> <i class="fa fa-minus"></i>

            </td>
            <td>Lego Reinvention</td>
            <td>Lakeshore</td>
            <td>Wednesdays 2:00pm - 3:00pm</td>
            <td>Jul 09</td>
            <td></td>
            <td>$2</td>
            <td>11/15</td>
        </tr>
        </table>
            
            
            </td>
        </tr>
        <tr class="collapse collapsed1">
            <td class="text-right"> <i class="fa fa-minus"></i>

            </td>
            <td>Lego Reinvention</td>
            <td>Lakeshore</td>
            <td>Wednesdays 2:00pm - 3:00pm</td>
            <td>Jul 09</td>
            <td></td>
            <td>$2</td>
            <td>11/15</td>
        </tr>
    </tbody>
</table>

CSS

.table>tbody>tr.collapse>td,
.table>tbody>tr.collapsing>td{
    background-color:;
}

.table>tbody>tr:not(.collapse):not(.collapsing):nth-child(odd)>td {
    background-color:#ecf3f8;
}