Discussoes de Programacao e Tecnologia

Congelando colunas com scroll vertical e horizontal conforme excle

0 respostas
Z
Zenas

Olá Amigos,

Após muita preocura, aqui no trabalho nos conseguimos realizar uma grid com as duas primeiras colunas congeladas com scroll horizontal e vertical, o codigo abaixo está funcionando, mas se alguém tiver uma solução melhor, pois o rich:bug, o não, 

<!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" />
<title>Documento sem título</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<style>

#fixarcoluna table{border:none;}
#fixarColuna .content table {width:100%;}
#fixarColuna .content tr {background-color: #f3faff;}
/* #fixarColuna .content tr:hover {background-color: #949fab;} */
#fixarColuna .content td {border-bottom:solid 1px #999; padding:6px 4px;}

#fixarColuna .contentHead td {border-bottom:solid 2px #CCC; padding:6px 4px;}
#fixarColuna .contentHead tr {background-color: #F0F1F2;}
#fixarColuna .content {display:block; width:100%; padding:0; margin:0; overflow-y: hidden; height:200px;}
#fixarColuna .contentHead {display:block; width:98.5%; padding:0; margin:0; overflow: hidden; height:35px;}
#fixarColuna .content div {display:inline; float: left; position: relative; border: none; width:100%;}
#fixarColuna .contentHead div {display:inline; float: left; position: relative; border: none; width:100%;}
#fixarColuna .content .contentHead .larguraP19 {width:19%;}

</style>

<script type="text/javascript">

$(document).ready(function(){
	$('#fixBody').scroll(function () {
		$("#colHead").scrollLeft($(this).scrollLeft());
	});
	$('#fixBody').scroll(function(){
		$("#colUie").scrollTop($(this).scrollTop());
		$("#colProjeto").scrollTop($(this).scrollTop());
	});

	$('#teste').css({'margin-top':'218px'});
	

});
</script>

</head>

<body>

<div style="position:absolute;background-color:white;width:100%;height:17px;z-index:1;" id="teste"></div>

<div id="fixarColuna">
    <div class="contentHead">
        <div class="larguraP19" style="width:15%;">
            <table cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                <td width="15%">Coluna1</td>
                </tr>
            </thead>
            </table>
        </div>
        <div class="larguraP19" style="width:15%;">
            <table cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                <td width="15%">Coluna2</td>
                </tr>
            </thead>
            </table>
        </div>
        <div id="colHead" style="width:70%; overflow-x: hidden;">
            <table cellspacing="0" cellpadding="0" border="0">
            <thead>
                <tr>
                <td style="min-width:180px;">Estação</td>
                <td style="min-width:180px;">Data</td>
                <td style="min-width:180px;">Status</td>
                <td style="min-width:180px;">Número</td>
                <td style="min-width:180px;">CPF</td>
				<td style="min-width:180px;">Coluna 8</td>
				<td style="min-width:180px;">Coluna 9</td>
                </tr>
             </thead>    
             </table>
        </div>    
    </div>
    <div class="content">    
        <div class="larguraP19" style="width:15%;overflow-y:hidden;overflow-x:scroll;height:200px;" id="colUie" >
            <table cellspacing="0" cellpadding="0" >
              <tr> 
                <td>Linha1</td>
              </tr>
              <tr> 
                <td>Linha2</td>
              </tr>
              <tr> 
                <td>Linha3</td>
              </tr>
              <tr> 
                <td>Linha4</td>
              </tr>
              <tr> 
                <td>Linha5</td>
              </tr>
              <tr> 
                <td>Linha6</td>
              </tr>
              <tr> 
                <td>Linha7</td>
              </tr>
              <tr> 
                <td>Linha8</td>
              </tr>
              <tr> 
                <td>Linha9</td>
              </tr>
              <tr> 
                <td>Linha10</td>
              </tr>
              <tr> 
                <td>Linha11</td>
              </tr>
              <tr> 
                <td>Linha12</td>
              </tr>
              <tr> 
                <td>Linha13</td>
              </tr>
              <tr> 
                <td>Linha14</td>
              </tr>
          </table>
        </div>
        <div class="larguraP19" style="width:15%;overflow-x:scroll;overflow-y:hidden;height:200px;" id="colProjeto">
            <table cellspacing="0" cellpadding="0" >
              <tr> 
                <td>Linha1</td>
              </tr>
              <tr> 
                <td>Linha2</td>
              </tr>
              <tr> 
                <td>Linha3</td>
              </tr>
              <tr> 
                <td>Linha4</td>
              </tr>
              <tr> 
                <td>Linha5</td>
              </tr>
              <tr> 
                <td>Linha6</td>
              </tr>
              <tr> 
                <td>Linha7</td>
              </tr>
              <tr> 
                <td>Linha8</td>
              </tr>
              <tr> 
                <td>Linha9</td>
              </tr>
              <tr> 
                <td>Linha10</td>
              </tr>
              <tr> 
                <td>Linha11</td>
              </tr>
              <tr> 
                <td>Linha12</td>
              </tr>
              <tr> 
                <td>Linha13</td>
              </tr>
              <tr> 
                <td>Linha14</td>
              </tr>
          </table>
        </div>
        <div id="fixBody" style="width:70%;overflow: scroll;height:200px;z-index:2;" >
			<table cellspacing="0" cellpadding="0" border="0">
              <tr> 
                <td style="min-width:180px;">KABC</td>
                <td style="min-width:180px;">03/12/2007</td>
                <td style="min-width:180px;">Ok</td>
                <td style="min-width:180px;">0</td>
                <td style="min-width:180px;">123456789</td>
				<td style="min-width:180px;">Coluna 8</td>
				<td style="min-width:180px;">Coluna 9</td>
              </tr>
              <tr> 
                <td style="min-width:180px;">KCBS</td>
                <td style="min-width:180px;">03/12/2007</td>
                <td style="min-width:180px;">Pendente</td>
                <td style="min-width:180px;">2</td>
                <td style="min-width:180px;">123456789</td>
				<td style="min-width:180px;">Coluna 8</td>
				<td style="min-width:180px;">Coluna 9</td>
              </tr>
              <tr> 
                <td style="min-width:180px;">WFLA</td>
                <td style="min-width:180px;">03/12/2007</td>
                <td style="min-width:180px;">Ok</td>
                <td style="min-width:180px;">1</td>
                <td style="min-width:180px;">123456789</td>
				<td style="min-width:180px;">Coluna 8</td>
				<td style="min-width:180px;">Coluna 9</td>
			</tr>
              <tr class="folha"> 
                <td style="min-width:180px;">WFLA</td>
                <td style="min-width:180px;">03/12/2007</td>
                <td style="min-width:180px;">Ok</td>
                <td style="min-width:180px;">1</td>
                <td style="min-width:180px;">123456789</td>
				<td style="min-width:180px;">Coluna 8</td>
				<td style="min-width:180px;">Coluna 9</td>

			  </tr>
              <tr> 
                <td style="min-width:180px;">WFLA</td>
                <td style="min-width:180px;">03/12/2007</td>
                <td style="min-width:180px;">Ok</td>
                <td style="min-width:180px;">1</td>
				<td style="min-width:180px;">123456789</td>
				<td style="min-width:180px;">Coluna 8</td>
				<td style="min-width:180px;">Coluna 9</td>
              </tr>
              <tr> 
                <td style="min-width:180px;">WFLA</td>
                <td style="min-width:180px;">03/12/2007</td>
                <td style="min-width:180px;">Ok</td>
                <td style="min-width:180px;">1</td>
				<td style="min-width:180px;">123456789</td>
				<td style="min-width:180px;">Coluna 8</td>
				<td style="min-width:180px;">Coluna 9</td>
              </tr>
              <tr> 
                <td style="min-width:180px;">WFLA</td>
                <td style="min-width:180px;">03/12/2007</td>
                <td style="min-width:180px;">Ok</td>
                <td style="min-width:180px;">1</td>
				<td style="min-width:180px;">123456789</td>
				<td style="min-width:180px;">Coluna 8</td>
				<td style="min-width:180px;">Coluna 9</td>
              </tr>
              <tr> 
                <td style="min-width:180px;">EBMK</td>
                <td style="min-width:180px;">03/12/2007</td>
                <td style="min-width:180px;">Ok</td>
                <td style="min-width:180px;">1</td>
				<td style="min-width:180px;">123456789</td>
				<td style="min-width:180px;">Coluna 8</td>
				<td style="min-width:180px;">Coluna 9</td>
              </tr>
              <tr> 
                <td style="min-width:180px;">ZXCD</td>
                <td style="min-width:180px;">03/12/2007</td>
                <td style="min-width:180px;">Ok</td>
                <td style="min-width:180px;">6</td>
				<td style="min-width:180px;">123456789</td>
				<td style="min-width:180px;">Coluna 8</td>
				<td style="min-width:180px;">Coluna 9</td>
              </tr>
              <tr> 
                <td style="min-width:180px;">MJKL</td>
                <td style="min-width:180px;">03/12/2007</td>
                <td style="min-width:180px;">Ok</td>
                <td style="min-width:180px;">1</td>
				<td style="min-width:180px;">123456789</td>
				<td style="min-width:180px;">Coluna 8</td>
				<td style="min-width:180px;">Coluna 9</td>
              </tr>
              <tr> 
                <td style="min-width:180px;">BNMH</td>
                <td style="min-width:180px;">04/12/2007</td>
                <td style="min-width:180px;">Ok</td>
                <td style="min-width:180px;">6</td>
				<td style="min-width:180px;">123456789</td>
				<td style="min-width:180px;">Coluna 8</td>
				<td style="min-width:180px;">Coluna 9</td>
              </tr>
              <tr> 
                <td style="min-width:180px;">HJYK</td>
                <td style="min-width:180px;">04/12/2007</td>
                <td style="min-width:180px;">Pendente</td>
                <td style="min-width:180px;">1</td>
				<td style="min-width:180px;">123456789</td>
				<td style="min-width:180px;">Coluna 8</td>
				<td style="min-width:180px;">Coluna 9</td>
              </tr>
              <tr> 
                <td style="min-width:180px;">WDFG</td>
                <td style="min-width:180px;">04/12/2007</td>
                <td style="min-width:180px;">Pendente</td>
                <td style="min-width:180px;">4</td>
				<td style="min-width:180px;">123456789</td>
				<td style="min-width:180px;">Coluna 8</td>
				<td style="min-width:180px;">Coluna 9</td>
              </tr>
              <tr> 
                <td style="min-width:180px;">ERTT</td>
                <td style="min-width:180px;">04/12/2007</td>
                <td style="min-width:180px;">Ok</td>
                <td style="min-width:180px;">9</td>
				<td style="min-width:180px;">123456789</td>
				<td style="min-width:180px;">Coluna 8</td>
				<td style="min-width:180px;">Coluna 9</td>
              </tr>
			</table>
        </div>
    </div>
	<div style="width:100%;border-color:red;"></div>
	
	
</div>

</body>
</html>

Agradeço quem puder melhor ou ajudar com uma solução melhor.

Abraços

Alura Sistemas operacionais: entenda seu conceito e suas funções Descubra o que são sistemas operacionais, suas funções e tipos. Aprenda tudo de forma clara e objetiva. Não perca tempo!
Criado 24 de agosto de 2011
Respostas 0
Participantes 1

Topicos relacionados

Somos mortais 33 respostas Configurar jetty no eclipse 9 respostas Em JSF como fazer um h:inputText aceitar apenas inteiro? 11 respostas É possivel usar Critéria API com JPA + Hibernate? 8 respostas Expressao Matematica em java , com parenteses 7 respostas
Casa do Codigo Casa do Codigo — Livros de tecnologia Livros de programacao, infraestrutura e inovacao
Fiap Graduacao em Tecnologia — FIAP Analise e Desenvolvimento de Sistemas, Engenharia de Software e mais