Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Liesse

HTML: Fixar coluna e rolar na horizontal

Por , em Desenvolvimento frontend

Recommended Posts

Liesse    0

Liesse
Postado

Alguém sabe me dizer como faço para fixar uma coluna de uma tabela no HTML e rolar na horizontal as demais colunas?

Assim como o excel fax quando congelamos uma coluna.

 

Aceito sugestões, pois este ponto é importante para mim.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Veja a propriedade position: fixed.

O thead tem algumas dessas propriedades, mas nem todos os browsers interpretam corretamente.

 

Dê uma olhada nessa solução:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Liesse    0

Liesse
Postado

Fiz uma análise no position fixed e também no thead e foi de ajuda para entender um pouco melhor onde estou pisando.

Mas ainda não consegui resolver meu problema.

 

Vou explicar melhor,

Tenho uma tabela e gostaria de fixar a primeira coluna na forma horizontal, variando assim as demais com a barra de rolagem horizontal.

Assim como o Excel faz.

Verifiquei que o position fixed (que seria o mais indicado ) não funciona no Internet Explorer 6.

 

Por isto de minha pergunta.

Se alguém tem algum exemplo de utilização ou javascript sobre o assunto eu agradeço, pois ainda não encontrei algo sobre o assunto.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

O HTML acabou ficando um pouco extenso, mas veja se é assim:

<style type="text/css">
*{
	margin:0;
	padding:0;
}
html,body{
	overflow:hidden;
	width:100%;
	height:100%;
}
div#rolagem {
	padding-top: 25px;
	width:100%;
	height:100%;
	overflow:auto;
}
div#fixa {
	position: absolute;
	background-color: #ccc;
}
div#fixa table tr td {
	width: 145px;
	text-align: center;
}
</style>
Ai o HTML segue:

<body>
<div id="fixa">
<table>
	<tr>
		<td>A</td>
		<td>B</td>
		<td>C</td>
		<td>D</td>
	</tr>
</table>
</div>

<div id="rolagem">
<table>
	<tr>
		<td><input type="text" /></td>
		<td><input type="text" /></td>
		<td><input type="text" /></td>
		<td><input type="text" /></td>
	</tr>
Vários outros TRs aqui dentro....
.....
	<tr>
		<td><input type="text" /></td>
		<td><input type="text" /></td>
		<td><input type="text" /></td>
		<td><input type="text" /></td>
	</tr>
</table>
</div>
</body>
E aqui o exemplo para ver online:

http://www.cenasordidas.hbe.com.br/exemplos/table.html

 

Reli o teu post, no caso estamos fixando a linha! você queria fixar a primeira coluna mesmo? Oque o excel faz é a linha.. confere ai, se não for a solução para fixar a coluna é bem semelhante.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Liesse    0

Liesse
Postado

Com a fixação do cabeçalho eu consegui fazer, mas com a fixação de uma coluna e variando as demais para a horizontal não.

 

No Excel existe uma opção de congelar painel ou mesmo dividindo a tela em duas tanto na vertical como na horizontal.

 

O que necessito é fixar a coluna, pois a página que tenho de disponibilizar tem a primeira coluna como descrição de uma atividade e as demais colunas são estatísticas que enchem a página e mais um pouco.

Neste caso fica ruim o usuário rolar a tela para a direita e parar de visualizr a descrição, pois perde a referência sobre qual a linha está sendo analisada.

 

Fiz uma análise do exemplo que enviou, mas talvez ainda não tenha entendido corretamente o conceito para estes casos, pois ainda não conseguir montar a fixação da coluna.

 

Agradeço se puder me ajudar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Tá.. dá uma olhada nisso:

http://www.cenasordidas.hbe.com.br/exemplos/tableColuna.html

 

Eu flutuei a coluna fixa, e a tabela. Assim como é a div da tabela que tem a rolagem, a fixa continua lá..travada..

div#rolagem {
	width: 98%;
	float: left;
	padding-top: 25px;
	height:100%;
	overflow:auto;
}
div#colunaFixa {
	background-color: #cc0;
	width: 2%;	
	padding-top: 25px;
	float: left;
}
:lol:

 

Edit _____

Ou olha esse, se o scroll tiver q ser horizontal. Testei IE6,7 e FF3

http://www.cenasordidas.hbe.com.br/exemplo...olunaLinha.html

Compartilhar este post

Link para o post
Compartilhar em outros sites

Liesse    0

Liesse
Postado

Obrigado pela força, mas ainda não é isto que preciso.

Neste exemplo que enviou quando rolo para baixo as colunas ficam fixas.

O que gostaria é que elas ficassem fixas somente quando rolo para a direita.

 

Veja uma planilha excel com o exemplo que gostaria de fazer:

 

http://www.jtime.com.br/Exemplo.xls

 

Role a planilha para a esquerda, direita, para cima e para baixo.

Irá verificar que o cabeçalho fica fixo quando rolo para baixo e a coluna fica fixa quando rolo para a direita.

 

É isto que preciso.

Compartilhar este post

Link para o post
Compartilhar em outros sites

antcargui    0

antcargui
Postado

Olá Liesse,

 

Estava com este mesmo problema e não achei solução na web. Seguramente alguém já explicou como fazer isto em algum tópico por ai.

 

Então como tinha prazo para entregar, eu acabei fazendo minha própria grid. Como não tenho muita experiência em programar com javascript/css, talvez o código tenha ficado meio "bagunçado".

 

Coloquei na web para ajudar outros que como eu (e agora você) tenham o mesmo problema.

 

A grid também permite navegação Célula-a-célula, basta clicar dentro de uma célula e utilizar as setas do teclado.

 

Infelizmente só funciona em Internet Explorer, mas acredito que qualquer pessoa com um pouco mais de conhecimento consiga adaptá-la para funcionar em qualquer browser.

 

O link é http://www.pensave.com.br/minhaGrid.html

 

Todo o código fonte está dentro do arquivo.

 

Se alguém ai conseguir melhorar (o que não vai ser muito dificil), gostaria muito de receber as melhorias.

 

Abraço e boa sorte.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kurt_RP    0

Kurt_RP
Postado

Olá Antônio Carlos!

 

Era justamente isso que eu estava procurando!!!

Estou a dias tentando fazer um lance como esse e não estava conseguindo de jeito nenhum, tipo eu até conseguia fixar uma coluna ou uma linha, mas as duas ao mesmo tempo e com o sincronismo de dados é quase que impossivel.

Felizmente, hoje em dia se encontra tudo na internet "ou quase tudo". hehehee

 

Como puder ver aqui realmente esse seu script só funciona no IE e como já faz um bom tempo que esse tópico foi criado, gostaria de saber se você ou mais alguem conseguiu adapta-lo para outros navegadores???

 

 

Abraço.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito