<?php
require_once(dirname(dirname(__FILE__))."/funcoes.php");
protegeArquivo(basename(__FILE__));
$material = $_COOKIE['material'];

loadJS('jquery-validate');
loadJS('jquery-validate-messages');
echo "<br> Sistema lab. de solos - Módulo amostras";
$sessao = new sessao();
$senhaCli=$sessao->getVar('iduser');
$idLabo=$sessao->getVar('idLabo');
$nomeOperador=$sessao->getVar('nomeuser');
echo(" Operador: $nomeOperador<br>");









?>










<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<META NAME="robots" CONTENT="noindex,nofollow">

	<title>Tabela com barras de rolagens e cabeçalhos fixos</title>

	<!--<script src="httpxxx://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> -->

</head>



<script type="text/javascript" language="javascript">

$(document).ready(function () {

    // Ao mover a barra de rolagem da tabela, mover seus cabecalhos e o 'versus'

    $("div#tabela").scroll(function () {

        $('div#tabela #cabecalhoHorizontal, #versus').css('top', $(this).scrollTop());

        $('div#tabela #cabecalhoVertical, #versus').css('left', $(this).scrollLeft());

    });

});

</script>



<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:20px; //era 30

		min-height:20px;//era 30

		max-height:20px;//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;

	}

	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>



<body>



<center>

    <h1>Tabela com barras de rolagem (scrolls) e cabeçalhos horizontal e vertical fixos</h1>
    <h3>HTML, CSS e javascript (JQuery)</h3>
    <h3>Oto Carlos Gugeler</h3>

    


</center>



<div id="tabela">



    <span id="versus">X</span>



    <!-- Primeiro, cria o cabecalho horizontal da tabela -->

    <table id="cabecalhoHorizontal">

        <thead>

            <tr>

               <td>01/03/2013</td><td>02/03/2013</td><td>03/03/2013</td><td>04/03/2013</td><td>05/03/2013</td>

               <td>06/03/2013</td><td>07/03/2013</td><td>08/03/2013</td><td>09/03/2013</td><td>10/03/2013</td>

               <td>11/03/2013</td><td>12/03/2013</td><td>13/03/2013</td><td>14/03/2013</td><td>15/03/2013</td>

               <td>16/03/2013</td><td>17/03/2013</td><td>18/03/2013</td><td>19/03/2013</td><td>20/03/2013</td>

               <td>21/03/2013</td><td>22/03/2013</td><td>23/03/2013</td><td>24/03/2013</td><td>25/03/2013</td>

               <td>26/03/2013</td><td>27/03/2013</td><td>28/03/2013</td><td>29/03/2013</td><td>30/03/2013</td>               

            </tr>

        </thead>

    </table>



	<!-- Depois, cria o cabecalho vertical da tabela -->

    <table id="cabecalhoVertical">

        <thead>

           <tr><td>Ana</td></tr>

           <tr><td>Aparecida</td></tr> 

           <tr><td>Breno</td></tr>    

           <tr><td>Carlos</td></tr>

           <tr><td>Celso</td></tr>

           <tr><td>Danila</td></tr>

           <tr><td>Everton</td></tr>

           <tr><td>Fabiana</td></tr>

           <tr><td>Fernanda</td></tr>

           <tr><td>Filipe</td></tr>

           <tr><td>Gilberto</td></tr>

           <tr><td>Hilda</td></tr>

           <tr><td>Irineu</td></tr>

           <tr><td>Jânio</td></tr>

           <tr><td>Juliana</td></tr>

           <tr><td>Magno</td></tr>

           <tr><td>Marcelo</td></tr>

           <tr><td>Mariana</td></tr>

           <tr><td>Miguel</td></tr>

           <tr><td>Olga</td></tr>

           <tr><td>Patrícia</td></tr>

           <tr><td>Pedro G.</td></tr>

           <tr><td>Pedro M.</td></tr>

           <tr><td>Sabrina</td></tr>

           <tr><td>Waléria</td></tr>

        </thead>

    </table>    

    

    <!-- Dados da tabela -->

    <table id="dados">        

        <tbody>  

        

        <!-- Ana -->

        <tr>

        	<td> feira </td><td> laerte </td><td> angela </td><td> googler </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>

        </tr>

        

        <!-- Aparecida -->

        <tr>

        	<td> L </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>        

        </tr>

        

        <!-- Breno -->

        <tr>

        	<td> L </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>        

        </tr>

        

        <!-- Carlos -->

        <tr>

        	<td> L </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>        

        </tr>

        

        <!-- Celso -->

        <tr>

        	<td> L </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>        

        </tr>

        

        <!-- Danila -->

        <tr>

        	<td> L </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>        

        </tr>

        

        <!-- Everton -->

        <tr>

        	<td> L </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>        

        </tr>

        

        <!-- Fabiana -->

        <tr>

        	<td> L </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>        

        </tr>

        

        <!-- Fernanda -->

        <tr>

        	<td> L </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>        

        </tr>

        

        <!-- Filipe -->

        <tr>

        	<td> L </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>        

        </tr>

        

        <!-- Gilberto -->

        <tr>

        	<td> L </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>        

        </tr>

        

        <!-- Hilda -->

        <tr>

        	<td> L </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>        

        </tr>

        

        <!-- Irineu -->

        <tr>

        	<td> L </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>        

        </tr>

        

        <!-- Jânio -->

        <tr>

        	<td> L </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>        

        </tr>

        

        <!-- Juliana -->

        <tr>

        	<td> L </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>        

        </tr>

        

        <!-- Magno -->

        <tr>

        	<td> L </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>        

        </tr>

        

        <!-- Marcelo -->

        <tr>

        	<td> L </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>        

        </tr>

        

        <!-- Mariana -->

        <tr>

        	<td> L </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>        

        </tr>

        

        <!-- Miguel -->

        

        <tr>

        	<td> L </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>        

        </tr>

        

        <!-- Olga -->

        <tr>

        	<td> L </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>        

        </tr>

        

        <!-- Patrícia -->

        <tr>

        	<td> L </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>        

        </tr>

        

        <!-- Pedro G. -->

        <tr>

        	<td> L </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>        

        </tr>

        

        <!-- Pedro M. -->

        <tr>

        	<td> L </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>        

        </tr>

        

        <!-- Sabrina -->

        <tr>

        	<td> L </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>        

        </tr>

        

        <!-- Waléria -->

        <tr>

        	<td> L </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> - </td><td> - </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> P </td><td> - </td><td> - </td><td> P </td>

            <td> P </td><td> P </td><td> P </td><td> P </td><td> - </td>

            <td> - </td><td> P </td><td> P </td><td> P </td><td> P </td>

            <td> P </td><td> - </td><td> - </td><td> P </td><td> P </td>        

        </tr>



        </tbody>

    </table>



</div>



</body>

</html>


<?php  
?>