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">
<script src="&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css&quot;"></script>
<table id="tprogram" class="table table-striped table-hover  dataTable no-footer" role="grid">
  <thead>
    <tr role="row">
      <th class="sorting_disabled" rowspan="1" colspan="1">Edith</th>
      <th class="icon_column sorting_disabled" rowspan="1" colspan="1"></th>
      <th class="sorting_disabled" rowspan="1" colspan="1"></th>
      <th class="sorting_disabled" rowspan="1" colspan="1"></th>
      <th class="sorting_disabled" rowspan="1" colspan="1"></th>
      <th class="sorting_disabled" rowspan="1" colspan="1"></th>
      <th class="sorting_disabled" rowspan="1" colspan="1"></th>
      <th class="sorting_disabled" rowspan="1" colspan="1"></th>
      <th class="sorting_disabled" rowspan="1" colspan="1"></th>
      <th class="sorting_disabled" rowspan="1" colspan="1"></th>
      <th class="sorting_disabled" rowspan="1" colspan="1"></th>
    </tr>
  </thead>

  <tbody>
    <tr class="parentRow odd shown" id="122" role="row">
      <td class="stripeOdd">
        <input class="checkbox" data-cascade="reg1055-122" name="prog_bookings[1055][122]" type="checkbox" value="on">
        <input class="hidden checkbox cascadereg1055-122Not" checked="checked" name="prog_bookings[1055][122]" type="checkbox" value="off">
      </td>
      <td class="text-right details-control stripeOdd">
        <i class="btn btn-xs glyphicon glyphicon-list" data-toggle="collapse" data-target=".collapsed122"></i>
      </td>
      <td class="stripeOdd">
        Introducing Windows 10 Jan 7</td>
      <td class="stripeOdd">Lakeshore</td>
      <td class="stripeOdd">Computer Classes</td>
      <td class="stripeOdd">Thursdays 1:30am - 3:30am
      </td>
      <td class="stripeOdd">Jan 07 - Dec 31</td>
      <td class="stripeOdd">0 -100
      </td>
      <td...

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;
}
td.nested{
  margin:0px;
  padding:0px;
  
}