JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<h1 class="text-center">Prueba de tabla</h1>
<table class="table table-bordered fixed">
	<thead>
		<tr class="cheader">
			<th rowspan="2" class="text-center">
				Reporte al  2014-04-07
			</th>
			<th rowspan="2" class="text-center">Saldo<br />(S/. M)</th>
			<th colspan="4" class="text-center">Variaciones Reales</th>
			<th colspan="3" class="text-center success-head">Seguimiento</th>
		</tr>
		<tr class="cheader">
			<th class="text-center">Dia</th>
			<th class="text-center">Mes</th>
			<th class="text-center">A&ntilde;o</th>
			<th class="text-center">Cierre</th>
			<th class="text-center">Meta<br />Mes</th>
			<th class="text-center">Desv<br />Mes</th>
			<th class="text-center">%Desv<br />Mes</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="text-left">SALDOS VARIOS</td>
			<td class="text-right">39,779,679</td>
			<td class="text-right">-58,035</td>
			<td class="text-right">-263,729</td>
			<td class="text-right">624,615</td>
			<td class="text-right">446,554</td>
			<td class="text-right">400,000</td>
			<td class="text-right">-663,729</td>
			<td class="text-right">-166%</td>
		</tr>
		<tr>
			<td class="text-left">SALDOS VARIOS</td>
			<td class="text-right">39,779,679</td>
			<td class="text-right">-58,035</td>
			<td class="text-right">-263,729</td>
			<td class="text-right">624,615</td>
			<td class="text-right">446,554</td>
			<td class="text-right">400,000</td>
			<td class="text-right">-663,729</td>
			<td class="text-right">-166%</td>
		</tr>
		<tr>
			<td class="text-left">SALDOS VARIOS</td>
			<td class="text-right">39,779,679</td>
			<td class="text-right">-58,035</td>
			<td class="text-right">-263,729</td>
			<td class="text-right">624,615</td>
			<td class="text-right">446,554</td>
			<td class="text-right">400,000</td>
			<td class="text-right">-663,729</td>
			<td class="text-right">-166%</td>
		</tr>
		<tr>
			<td class="text-left">SALDOS...

CSS

.cheader {
    background-color: #428BCA;
	color: #FFFFFF;
}

JavaScript

$(document).ready(function() {
    goheadfixed('table.fixed');


	function goheadfixed(classtable) {
	
		if($(classtable).length) {
	
			$(classtable).wrap('<div class="fix-inner"></div>'); 
			$('.fix-inner').wrap('<div class="fix-outer" style="position:relative; margin:auto;"></div>');
			$('.fix-outer').append('<div class="fix-head"></div>');
			$('.fix-head').prepend($('.fix-inner').html());
			$('.fix-head table').find('caption').remove();
			$('.fix-head table').css('width','100%');
	
			$('.fix-outer').css('width', $('.fix-inner table').outerWidth(true)+'px');
			$('.fix-head').css('width', $('.fix-inner table').outerWidth(true)+'px');
			$('.fix-head').css('height', $('.fix-inner table thead').height()+'px');
	
			// If exists caption, calculte his height for then remove of total
			var hcaption = 0;
			if($('.fix-inner table caption').length != 0)
				hcaption = parseInt($('.fix-inner table').find('caption').height()+'px');

			// Table's Top
			var hinner = parseInt( $('.fix-inner').offset().top );

			// Let's remember that <caption> is the beginning of a <table>, it mean that his top of the caption is the top of the table
			$('.fix-head').css({'position':'absolute', 'overflow':'hidden', 'top': hcaption+'px', 'left':0, 'z-index':100 });
		
			$(window).scroll(function () {
				var vscroll = $(window).scrollTop();

				if(vscroll >= hinner + hcaption)
					$('.fix-head').css('top',(vscroll-hinner)+'px');
				else
					$('.fix-head').css('top', hcaption+'px');
			});
	
			/*	If the windows resize	*/
			$(window).resize(goresize);
	
		}
	}

	function goresize() {
		$('.fix-head').css('width', $('.fix-inner table').outerWidth(true)+'px');
		$('.fix-head').css('height', $('.fix-inner table thead').outerHeight(true)+'px');
	}
    
});