<style type="text/css">

	body

	{

		font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

		font-size:13px;

	}

	div#tabela

	{

		width: 800px;      /* Largura da minha tabela na tela */

		height: 400px;     /* Altura da minha tabela na tela */

		overflow: auto;    /* Barras de rolagem automáticas nos eixos X e Y */

		margin: 0 auto;    /* O 'auto' é para ficar no centro da tela */

		position:relative; /* Necessário para os cabecalhos fixos */

		top:0;             /* Necessário para os cabecalhos fixos */

		left:0;            /* Necessário para os cabecalhos fixos */

	}

	div#tabela table

	{

		border-collapse:collapse; /* Sem espaços entre as células */

	}

	div#tabela table td

	{

		font-size:12px;

		font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;

		border:1px solid #d8d8d8;	

		width:70px;      /* Células precisam ter altura e largura fixas */

		min-width:70px;  /* Se você não colocar isso, as células menores que 70px vão ser diminuídas */

		max-width:70px; 

		height:24px; //era 30

		min-height:24px;//era 30

		max-height:24px;//era 30

	}

	div#tabela table#cabecalhoHorizontal td, 

	div#tabela table#cabecalhoVertical td 

	{

		background-color:buttonface;

	}

	div#tabela table#cabecalhoHorizontal

	{

		margin-left:72px;  /* 70px de largura do cabecalho vertical + 2 pixels das bordas do cabecalho */

		position:absolute; /* Posição variável em relação ao topo da div#tabela */

		top:0;             /* Posição inicial em relação ao topo da div#tabela */

		z-index:5;         /* Para ficar por cima da tabela de dados */

	}

	div#tabela table#cabecalhoHorizontal td 

	{

		text-align:center;

		vertical-align:middle;

	}

	div#tabela table#cabecalhoVertical

	{

		margin-top:33px;   /* 30px de altura do cabecalho horizontal + 2 pixels das bordas do cabecalho + 1px */

		position:absolute; /* Posição variável em relação a esquerda da div#tabela */

		left:0;            /* Posição inicial em relação a esquerda da div#tabela */

		z-index:5;         /* Para ficar por cima da tabela de dados */
		
		
		
		
		

	}

	div#tabela table#cabecalhoVertical td

	{

		white-space:nowrap; /* Não quebrar linhas */

		text-align:left;



		/* Aqui temos um problema: preciso de uma margem, mas a largura da margem é somada à largura

		 * da célula e por isso a largura extrapola o tamanho máximo definido (70px). 

		 * Por isso, aqui eu diminuo a largura para, somada à margem, ficar do tamanho certo.

		*/

		width:65px;

		min-width:65px;

		max-width:65px;

		padding-left:5px;
		
		height:30px; //era 30

		min-height:30px;//era 30

		max-height:30px;//era 30
		

	}

	div#tabela table#dados

	{

		margin-top:33px;  /* 30px de altura do cabecalho horizontal + 2 pixels das bordas do cabecalho + 1 px*/

		margin-left:72px; /* 70px de largura do cabecalho vertical + 2 pixels das bordas do cabecalho */

		z-index:2;		  /* Menor que dos cabecalhos, para que fique por detrás deles */

	}

	div#tabela table#dados td

	{

		background:white;

		text-align:center;

	}

	

	/* Célula com o 'X', que virtualmente pertence ao cabecalho vertical e horizontal */

	div#tabela #versus

	{

 		display:inline-block;

		position:absolute;

		top:0;

		left:0;

		z-index:10;



		height:32px;

		line-height:32px;

		width:71px;

		min-width:71px;

		

		text-align:center;

		vertical-align:middle;

		border:1px solid #d8d8d8;

		background-color:#F4FAE8;

		color:#A1D16D;

	}

</style>
