JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table class="table table-hover table-bordered table-strip table-category sortTable">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Status</th>
<th>Manage</th>
</tr>
</thead>
<tbody>
<tr data-id="1" class="mfp-show">
<td class="countCategory">1</td>
<td class="content parent">Administrator</td>
<td class="statuses">Active</td>
<td class="no-left-border">
<a href="javascript:void(0)" class="addParent"><img src="/assets/icons/add.png"></a>
<a href="javascript:void(0)" class="removeChild"><img src="/assets/icons/cross.png"></a>
<a href="javascript:void(0)" class="fshowSubChild"><img src="/assets/icons/application_cascade.png"></a>
</td>
</tr>
<tr>
<td colspan="4" data-rel="1" class="mfp-hide">
<table class="table table-bordered sortTable">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Status</th>
<th>Manage</th>
</tr>
</thead>
<tbody>
<tr class="mfp-add" data-id="2">
<td>1</td>
<td class="no-right-border content">Sub Administrator</td>
<td class="statuses">Active</td>
<td class="no-left-border">
<a href="javascript:void(0)" class="addChild"><img src="/assets/icons/add.png"></a>
<a href="javascript:void(0)" class="removeChild"><img src="/assets/icons/cross.png"></a>
<a href="javascript:void(0)" class="showSubChild" style="display: none;"><img src="/assets/icons/application_cascade.png"></a>
</td>
</tr>
...