table with popover

by Rayudu Ikkurthi

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="modalBlockout" style="z-index: 1044; opacity: 0.5;"></div>
<div class="modalHost" style="z-index: 1044; opacity: 1; width: 100%;height:auto;background:white; left: 0%;top:10%;">
<div class="custom-modal-body">
			<div style="background:steelblue;color:#fff;padding:20px 10px;">
				<div style="float:left;">Address Book</div>
				<div style="float:right;">close</div>
				<div style="clear:both;"></div>
			</div>
			
			<div style="margin-bottom: 20px; margin-top: 10px;">
						<span style="font-size: 17px; font-weight: 600;">Company Name Search</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="text" style="width: 180px; height: 16px;" data-bind="value: addressBookSearchText, valueUpdate: 'afterkeydown'">
			</div>
			
	<div style="padding:5px;">
	<table border="1" class="main" style="">
		<thead>
			<tr>
				<th>1</th><th>1</th><th>1</th><th>1</th><th>1</th><th>1</th><th>1</th><th>1</th>
			</tr>
		</thead>
		<tbody style="position:relative;">
		<tr>
			<td colspan="8" class="firsttd" style="padding:0px;position:relative;">
				<table class="secondtable">
					<tr>
						<td>one</td><td>one</td><td>one</td><td>
							<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.Vivamus sagittis lacus vel augue laoreet rutrum faucibus.Vivamus sagittis lacus vel augue laoreet rutrum faucibus.Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	  top
	</button>
						</td><td>one</td><td>one</td><td>one</td><td>one</td>
					</tr>
				</table>
				<table...

CSS

.modalBlockout {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0;
		pointer-events: auto;
		-webkit-backface-visibility: hidden;
		-webkit-transition: opacity .1s linear;
		-moz-transition: opacity .1s linear;
		-o-transition: opacity .1s linear;
		transition: opacity .1s linear;
	}
	.custom-modal-body
	{
		width:600px;
		margin:40px;
	}
	.main{width:100%;}
	.main th,.main td{
	   padding:5px;
		border:1px solid red;
	}
	.firsttd{
		height:200px;
		overflow-y:scroll;
		position:relative;
		z-index:99;
	}
	.secondtable{position:absolute;top:0px;width:100%;margin:0px;padding:0px;}
	.secondtable:nth-child(1){top:0px;}
	.secondtable:nth-child(2){top:30px;}
	.secondtable:nth-child(3){top:60px;}
	.secondtable:nth-child(4){top:90px;}
	.secondtable:nth-child(5){top:120px;}
	.secondtable:nth-child(6){top:150px;}
	.secondtable:nth-child(7){top:180px;}
	.secondtable:nth-child(8){top:210px;}
	.secondtable:nth-child(9){top:240px;}
	.btn.btn-default{
		padding:0px;
		margin:0px;
		height:20px;
		width:40px;
		background:steelblue;
	}
	.modalHost {
		top: 50%;
		left: 50%;
		position: fixed;
		opacity: 0;
		-webkit-backface-visibility: hidden;
		-webkit-transition: opacity .1s linear;
		-moz-transition: opacity .1s linear;
		-o-transition: opacity .1s linear;
		transition: opacity .1s linear;
	}

JavaScript

$(function () {
  $('[data-toggle="popover"]').popover()
})

$('.firsttd').find('table').each(function (){
  
  top = 0;
  $(this).css('top',top + 'px');
  top+=$(this).height();
  
});