Ir para conteúdo

Arquivado

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

hunternh

Tabela com cabeçalho fixo e barra de rolagem

Por , em Desenvolvimento frontend

Recommended Posts

hunternh    2

hunternh
Postado

Se não houver a necessidade de barra de rolagem, apenas remova o height e o overflow de .scrollContainer e diminua 16 px de .tabContainer e scrollContainer na propriedade width.

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"><html><head><title>Tabela</title><style type="text/css">body { font: normal 11px tahoma,arial,serif; }table{margin: 0px;}table,th,td{border-collapse: collapse;}th,td{border-bottom: 1px solid #000000;padding: 0px;}th span,td span{display: block; padding: 3px}#lista table {width: 350px;}#lista th{color: #FFFFFF;background-color: #E92345;text-align: left}#lista.tabContainer {width: 366px;border: 1px solid #000000}#lista .scrollContainer {width: 366px;height: 100px;overflow: auto;}#lista .tabela-coluna0{width: 100px;}#lista .tabela-coluna1{width: 150px;}#lista .tabela-coluna2{width: 100px;}</style></head><body><div class="tabContainer" id="lista">	<table border="0px">		<thead>			<tr>				<th class="tabela-coluna0"><span>CPF</span></th>				<th class="tabela-coluna1"><span>Nome</span></th>				<th class="tabela-coluna2"><span>Cargo</span></th>			</tr>		</thead>	</table>	<div class="scrollContainer">		<table border="0">			<tbody>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>			</tbody>		</table>	</div></div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Caro amigo em primeiro lugar a tabela aqui exposta foi desenvolvida sem bordas laterais internas e toda a formatação das bordas é feita no css, se você quer uma com bordas internas ai vai a solução, repare nas alterações que eu fiz no css, sempre leve em conta que as bordas comem espaço das células:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"><html><head><title>Tabela</title><style type="text/css">body { font: normal 11px tahoma,arial,serif; }table{margin: 0px;}table,th,td{border-collapse: collapse;}th{border-top: 1px solid #000000;}th,td{border-bottom: 1px solid #000000;border-right: 1px solid #000000;padding: 0px;}th span,td span{display: block; padding: 3px}#lista table {width: 350px;}#lista th{color: #FFFFFF;background-color: #E92345;text-align: left}#lista.tabContainer {width: 367px;border: 1px solid #000000;border-right: 0px;border-top: 0px;}#lista .scrollContainer {width: 367px;height: 100px;overflow: auto;}#lista .tabela-coluna0{width: 99px;}#lista .tabela-coluna1{width: 149px;}#lista .tabela-coluna2{width: 99px;}</style></head><body><div class="tabContainer" id="lista">	<table border="0px">		<thead>			<tr>				<th class="tabela-coluna0"><span>CPF</span></th>				<th class="tabela-coluna1"><span>Nome</span></th>				<th class="tabela-coluna2"><span>Cargo</span></th>			</tr>		</thead>	</table>	<div class="scrollContainer">		<table border="0">			<tbody>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>			</tbody>		</table>	</div></div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Cardoso    1

Tiago Cardoso
Postado

Isso mesmo cara você resolveu meu problema deste post aqui:

 

http://forum.imasters.com.br/index.php?showtopic=215400

 

A comunidade agradece!

 

Giovanni se puder coloque este tópico em Artigos ou algo assim, acho muito interessante, pois iframes não são mais necessários com esse script...

 

Novamente parabéns Hunternh

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Muito obrigado, eu estou aqui para isso, compartilhar o meu conhecimento. Qualquer coisa é só perguntar, se eu souber a resposta de alguma dúvida responderei com o maior prazer.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Não testei, mas se o Tiago disse que funcionou, tá beleza.

Obrigado por ajudar hunternh.

 

Já está em Artigos, Dicas, Tutoriais e Materias.

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Cardoso    1

Tiago Cardoso
Postado

Não testei, mas se o Tiago disse que funcionou, tá beleza.

Obrigado por ajudar hunternh.

 

Já está em Artigos, Dicas, Tutoriais e Materias.

 

[]'s

Opa cara obrigado pela confiança...

 

Fiz uma versão mais reciclada de seu script hunternh, o CSS ficou um pouco menor, ai vai:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"><html><head><title>Tabela</title><style type="text/css">body { font: normal 11px tahoma,arial,serif; }table {margin: 0px;}table,th,td {border-collapse: collapse;}th,td {border-bottom: 1px solid #000;padding: 0px;}th span,td span {display: block; padding: 3px}table {width: 650px;}th {color: #FFF;background-color: #E92345;text-align: left}.tabContainer, .scrollContainer {width: 667px;}.scrollContainer {height: 100px;overflow: auto;}.tabela-coluna0 {width: 200px;}.tabela-coluna1 {width: 250px;}.tabela-coluna2 {width: 200px;}</style></head><body><div class="tabContainer">	<table border="1">		<thead>			<tr>				<th class="tabela-coluna0"><span>CPF</span></th>				<th class="tabela-coluna1"><span>Nome</span></th>				<th class="tabela-coluna2"><span>Cargo</span></th>			</tr>		</thead>	</table>	<div class="scrollContainer">		<table border="1">			<tbody>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>				<tr>					<td class="tabela-coluna0"><span>111.111.111-11</span></td>					<td class="tabela-coluna1"><span>Jorge Luiz da Silva</span></td>					<td class="tabela-coluna2"><span>teste</span></td>				</tr>			</tbody>		</table>	</div></div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Eu tinha deixado com o id #lista pro pessoal ver, que se por acaso quiser utilizar mais de uma tabela na mesmo tela, com tamanhos diferentes, quais são as linhas onde serão alteradas as cores e tamanhos. Onde não tinha o id #lista é default pra todas as tabelas

Compartilhar este post

Link para o post
Compartilhar em outros sites

Poe    0

Poe
Postado

Mas a minha chatice fala mais alto e eu pergunto: o que o PKTIAGO queria era uma tabela "semanticamente correta", não é? Esta é uma solução "quase certa", vendo que se eu for levar em consideração a estrutura de uma tabela e bancar o chiita isso não vai estar dentro das normas, devido a separação do header e do corpo da tabela. Não estou falando que não resolve o problema, hein? :P Só estou dando o toque! :D E desculpa aí, PKTIAGO, não tive tempo de parar pra tentar resolver o seu problema lá. :(Abraço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Em si não há uma separação pq são duas tabelas distintas, uma apenas com thead e outra apenas com tbody. Não sei se está errado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

O que importa é que resolve o problema, não vale a pena deixar de utilizar uma solução por não ser semântica[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Mas, se a questão é um código válido basta inserir dentro da primeira table o seguinte código:

 

<tbody class="tb">	<tr>		<td></td>	</tr></tbody>

e esse css: .tb{display:none}

 

pode testar na w3c que vai passar no teste.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Cardoso    1

Tiago Cardoso
Postado

Mas a minha chatice fala mais alto e eu pergunto: o que o PKTIAGO queria era uma tabela "semanticamente correta", não é? Esta é uma solução "quase certa", vendo que se eu for levar em consideração a estrutura de uma tabela e bancar o chiita isso não vai estar dentro das normas, devido a separação do header e do corpo da tabela. Não estou falando que não resolve o problema, hein? Só estou dando o toque! E desculpa aí, PKTIAGO, não tive tempo de parar pra tentar resolver o seu problema lá. Abraço.

Que isso cara eu sei como é ...Mas o que você diz é que o w3c não aprova tabelas com apenas o tbody?Essa eu não sabia...legal

Compartilhar este post

Link para o post
Compartilhar em outros sites

Poe    0

Poe
Postado

O que importa é que resolve o problema, não vale a pena deixar de utilizar uma solução por não ser semântica

Eu disse exatamente isso no meu post. lol O que eu queria reforçar é que é uma saída funcional, mas não é uma saída correta. Se a preocupação é com a ferramenta/funcionalidade e a geração dessas tabelas é feita com um script, então não é importante. Agora, se você está buscando um código formatado de maneira a ser interpretado por multiplos navegadores e midias, daí a coisa muda de figura. Pq isso? Imagine se eu quiser exportar esse mesmo conteúdo para um navegador WAP ou para um browser de celular ou handheld. Entendam que não estou discutindo a semântica somente, mas a aplicação. Isso deve ser deixado BEM claro quando desenvolvemos um código - o foco e o objetivo do projeto sempre falam mais alto no final.Um abraço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Poe    0

Poe
Postado

Mas o que você diz é que o w3c não aprova tabelas com apenas o tbody?Essa eu não sabia...legal

Não, não, ele aceita sim! Deixa eu ver se fica mais claro: O que você estava querendo eram tabelas "semanticamente corretas". Se o seu projeto exige isso como pré-requisito, separar o título da tabela do seu corpo não é "certo", já que os navegadores vão interpretar o código de cada uma das tabelas como sendo tabelas distintas. Para a entidade tabela existir como uma unidade, é necessário que tudo esteja dentro dos lugares corretos. Agora, se o seu projeto NÃO exige que o código esteja correto, o mais próximo do certo pode ser considerado aplicável, já que não é uma obrigatoriedade que as coisas estejam totalmente dentro dos padrões e as aplicações rodem somente em uma grupo que aceita essas particularidades. Se o seu projeto é maleável, o seu código então passa a ser maleável também. Essa é a premissa de qualquer "codeiro" que está nessa batalha por pagar as contas e trabalhar pelo que funciona - fazer o certo é legal? Ô se é, mas também precisamos que as coisas funcionem para o que elas precisam! :DJogo de cintura é essencial! :D

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Cardoso    1

Tiago Cardoso
Postado

Ok cara entendi o que você disse, o buraco é mais embaixo!heheheMa no meu caso não precisa ser 100% semânticamente correto e sim funcional e leveObrigado pela explicaçã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