JSFiddle - React, Tailwind, and code Playground
HTML
<table width="100%" class="brdr">
<tr>
<td width="7%">Company Name</td>
<td width="10%">Plan/Scheme Name</td>
<td width="11%">Policy no.</td>
<td width="6%">License no.</td>
<td width="9%">Gross Premium Per Member</td>
<td width="7%">Net Premium Per Member</td>
<td width="8%">Policy Start Date</td>
<td width="9%">Policy End Date</td>
<td width="4%">Total Members</td>
<td width="5%">Active Members</td>
<td width="6%">Deleted Members</td>
<td width="6%">Total pro.Gross Premium</td>
<td width="7%">Total pro.Net Premium</td>
<td width="5%">View</td>
</tr>
<tr>
<td class="aa">AAAA
<div class="aa-over">
<span class="table_header">AAAA Company</span>
<table width="100%">
<tr>
<td>Total Members</td>
<td>Active Members</td>
<td>No.of Members Visited</td>
</tr>
<tr>
<td>3</td>
<td>1</td>
<td>0</td>
</tr>
</table>
</div>
</td>
<td>BASIC PLAN</td>
<td>EZ/BASIC/111/121</td>
<td>111</td>
<td>22.00</td>
<td>20.68</td>
<td>12 Feb 2014</td>
<td>19 Feb 2014</td>
<td>0</td>
<td>0</td>
...
CSS
table{ background:#ccc;border:solid 1px #fff;}
.aa-over{
position:absolute;
float:left;
left:0px;
display:none;
z-index:9;
width:400px;
float:left;
}
table tr td.aa {
background:#868686;
}
table tr td.aa table tr td{
padding:10px;
}
span.table_header{
padding:8px 0;
background-color:#018754;
float:left;
width:100%;
text-transform:uppercase;
font-size:14px;
color:#fff;
text-align:center;
}
JavaScript
$(function(){
$(".aa").hover(function(){
}
,function(){
$(this).find(".aa-over").stop(true).fadeOut();
});
});
$(document).bind('mousemove', function(e){
$('.aa-over').css({
left: e.pageX + 20,
top: e.pageY
});
});