Ir para conteúdo

Arquivado

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

Giovani

Tabela com cabeçalho fixo e barra de rolagem

Por , em Desenvolvimento frontend

Recommended Posts

Giovani    104

Giovani
Postado

Feito pelo membro hunternh.

 

<!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>
Link do post original

Aproveitem! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

fael    1

fael
Postado

Não teria uma solução para rolar tb as colunas? Para o caso de a tabela seja maior que a largura total da tela?

Compartilhar este post

Link para o post
Compartilhar em outros sites

hunternh    2

hunternh
Postado

Seria isso que você queria?

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.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}.tb{display:none}#lista table {width: 700px;}#lista th{color: #FFFFFF;background-color: #E92345;text-align: left}#lista.tabContainer {width: 366px;border: 1px solid #000000}#lista .scrollContainer {width: 366px;height: 200px;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">	<div class="scrollContainer">	<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>				<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>			<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>					<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>					<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>					<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>					<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>					<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>					<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>					<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>					<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>					<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>					<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>					<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>					<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

Maux    0

Maux
Postado

muito legal o código..

vai servir de grande ajuda =D

vlw gio

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