Código Fonte - O melhor conteúdo para programadores

Este código tem nota

Autor

Java

Compartilhe e guarde

Enquete

Qual é o melhor site de buscas da internet?

Home Código Fonte JavaScript - DHTML Diversos

Fixar linha e imprimir cabeçalho e rodapé em todas as páginas

Fixar linha como cabeçalho e imprimir cabeçalho e rodapé em todas as páginas

<!-- This comment keeps IE6/7 in the reliable quirks mode -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Fixar linha como cabeçalho e imprimir cabeçalho e rodapé em todas as páginas</title>

<meta name="keywords" content="fixed table header; non-scroll header; fixed footer; freeze header; CSS tips; print repeating headers; print repeating footers">

<link rel="stylesheet" href="basic.css" type="text/css">

<style type="text/css">
div.conteudodatabela {
	width: 65%;		/* table width will be 99% of this*/
	height: 200px; 	/* must be greater than tbody*/
	overflow: auto;
	margin: 0 auto;
	}

table {
	width: 99%;		/*100% of container produces horiz. scroll in Mozilla*/
	border: none;
	background-color: #f7f7f7;
	}
	
table>tbody	{  /* child selector syntax which IE6 and older do not support*/
	overflow: auto; 
	height: 200px;
	overflow-x: hidden;
	}
	
thead tr	{
	position:relative; 
	top: expression(offsetParent.scrollTop); /*IE5+ only*/
	}
	
thead td, thead th {
	text-align: center;
	font-size: 14px; 
	background-color: oldlace;
	color: steelblue;
	font-weight: bold;
	border-top: solid 1px #d8d8d8;
	}	
	
td	{
	color: #000;
	padding-right: 2px;
	font-size: 12px;
	text-align: right;
	border-bottom: solid 1px #d8d8d8;
	border-left: solid 1px #d8d8d8;
	}
	
table tfoot tr { /*idea of Renato Cherullo to help IE*/
      position: relative; 
      overflow-x: hidden;
      top: expression(parentNode.parentNode.offsetHeight >= 
	  offsetParent.offsetHeight ? 0 - parentNode.parentNode.offsetHeight + offsetParent.offsetHeight + offsetParent.scrollTop : 0);
      }


tfoot td	{
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	background-color: papayawhip;
	color: steelblue;
	border-top: solid 1px slategray;
	}

td:last-child {padding-right: 20px;} /*prevent Mozilla scrollbar from hiding cell content*/

</style>



<!-- Estilo para impressão -->
<style type="text/css" media="print">
div.conteudodatabela {overflow: visible;	}
table>tbody	{overflow: visible; }
td {height: 14pt;} /*adds control for test purposes*/
thead td	{font-size: 11pt;	}
tfoot td	{
	text-align: center;
	font-size: 9pt;
	border-bottom: solid 1px slategray;
	}
	
thead	{display: table-header-group;	}
tfoot	{display: table-footer-group;	}
thead th, thead td	{position: static; } 

thead tr	{position: static; } /*prevent problem if print after scrolling table*/ 
table tfoot tr {     position: static;    }


</style>

</head>

<body>

<div id="conteudo">

O rodapé será impresso em todas as páginas assim como o cabeçalho.

<div class="conteudodatabela">
  <table cellspacing="0">
     <thead>
      <tr> 
        <td width="18%">Estação</td>
        <td width="38%">Data</td>
        <td width="28%">Status</td>
        <td width="16%">Número</td>
      </tr>
    </thead>
    <tfoot>
      <tr> 
        <td colspan="5">O rodapé será impresso em todas as páginas</td>
      </tr>
    </tfoot>
    <tbody>
      <tr> 
        <td>KABC</td>
        <td>03/12/2007</td>
        <td>Ok</td>
        <td>0</td>
      </tr>
      <tr> 
        <td>KCBS</td>
        <td>03/12/2007</td>
        <td>Pendente</td>
        <td>2</td>
      </tr>
      <tr> 
        <td>WFLA</td>
        <td>03/12/2007</td>
        <td>Ok</td>
        <td>1</td>
      </tr>
      <tr> 
        <td>WFLA</td>
        <td>03/12/2007</td>
        <td>Ok</td>
        <td>1</td>
      </tr>
      <tr> 
        <td>WFLA</td>
        <td>03/12/2007</td>
        <td>Ok</td>
        <td>1</td>
      </tr>
      <tr> 
        <td>WFLA</td>
        <td>03/12/2007</td>
        <td>Ok</td>
        <td>1</td>
      </tr>
      <tr> 
        <td>WFLA</td>
        <td>03/12/2007</td>
        <td>Ok</td>
        <td>1</td>
      </tr>
      <tr> 
        <td>EBMK</td>
        <td>03/12/2007</td>
        <td>Ok</td>
        <td>1</td>
      </tr>
      <tr> 
        <td>ZXCD</td>
        <td>03/12/2007</td>
        <td>Ok</td>
        <td>6</td>
      </tr>
      <tr> 
        <td>MJKL</td>
        <td>03/12/2007</td>
        <td>Ok</td>
        <td>1</td>
      </tr>
      <tr> 
        <td>BNMH</td>
        <td>04/12/2007</td>
        <td>Ok</td>
        <td>6</td>
      </tr>
      <tr> 
        <td>HJYK</td>
        <td>04/12/2007</td>
        <td>Pendente</td>
        <td>1</td>
      </tr>
      <tr> 
        <td>WDFG</td>
        <td>04/12/2007</td>
        <td>Pendente</td>
        <td>4</td>
      </tr>
      <tr> 
        <td>ERTT</td>
        <td>04/12/2007</td>
        <td>Ok</td>
        <td>9</td>
      </tr>

    </tbody>
  </table>

</div>


</div> 
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Fixar linha como cabeçalho e imprimir cabeçalho e rodapé em todas as páginas</title>

table {
	width: 99%;		/*100% of container produces horiz. scroll in Mozilla*/
	border: none;
	background-color: #f7f7f7;
	}
	
table>tbody	{  /* child selector syntax which IE6 and older do not support*/
	overflow: auto; 
	height: 200px;
	overflow-x: hidden;
	}
	
thead tr	{
	position:relative; 
	top: expression(offsetParent.scrollTop); /*IE5+ only*/
	}
	
thead td, thead th {
	text-align: center;
	font-size: 14px; 
	background-color: oldlace;
	color: steelblue;
	font-weight: bold;
	border-top: solid 1px #d8d8d8;
	}	
	
td	{
	color: #000;
	padding-right: 2px;
	font-size: 12px;
	text-align: right;
	border-bottom: solid 1px #d8d8d8;
	border-left: solid 1px #d8d8d8;
	}
	
table tfoot tr { /*idea of Renato Cherullo to help IE*/
      position: relative; 
      overflow-x: hidden;
      top: expression(parentNode.parentNode.offsetHeight >= 
	  offsetParent.offsetHeight ? 0 - parentNode.parentNode.offsetHeight + offsetParent.offsetHeight + offsetParent.scrollTop : 0);
      }

tfoot td	{
	text-align: center;
	font-size: 11px;
	font-weight: bold;
	background-color: papayawhip;
	color: steelblue;
	border-top: solid 1px slategray;
	}

td:last-child {padding-right: 20px;} /*prevent Mozilla scrollbar from hiding cell content*/

</style>

<style type="text/css" media="print">
div.conteudodatabela {overflow: visible;	}
table>tbody	{overflow: visible; }
td {height: 14pt;} /*adds control for test purposes*/
thead td	{font-size: 11pt;	}
tfoot td	{
	text-align: center;
	font-size: 9pt;
	border-bottom: solid 1px slategray;
	}
	
thead	{display: table-header-group;	}
tfoot	{display: table-footer-group;	}
thead th, thead td	{position: static; }

thead tr	{position: static; } /*prevent problem if print after scrolling table*/ 
table tfoot tr {     position: static;    }

</style>

</head>

<body>

O rodapé será impresso em todas as páginas assim como o cabeçalho.

<div class="conteudodatabela">
  <table cellspacing="0">
     <thead>
      <tr> 
        <td width="18%">Estação</td>
        <td width="38%">Data</td>
        <td width="28%">Status</td>
        <td width="16%">Número</td>
      </tr>
    </thead>
    <tfoot>
      <tr> 
        <td colspan="5">O rodapé será impresso em todas as páginas</td>
      </tr>
    </tfoot>
    <tbody>
      <tr> 
        <td>KABC</td>
        <td>03/12/2007</td>
        <td>Ok</td>
        <td>0</td>
      </tr>
      <tr> 
        <td>KCBS</td>
        <td>03/12/2007</td>
        <td>Pendente</td>
        <td>2</td>
      </tr>
      <tr> 
        <td>WFLA</td>
        <td>03/12/2007</td>
        <td>Ok</td>
        <td>1</td>
      </tr>
      <tr> 
        <td>WFLA</td>
        <td>03/12/2007</td>
        <td>Ok</td>
        <td>1</td>
      </tr>
      <tr> 
        <td>WFLA</td>
        <td>03/12/2007</td>
        <td>Ok</td>
        <td>1</td>
      </tr>
      <tr> 
        <td>WFLA</td>
        <td>03/12/2007</td>
        <td>Ok</td>
        <td>1</td>
      </tr>
      <tr> 
        <td>WFLA</td>
        <td>03/12/2007</td>
        <td>Ok</td>
        <td>1</td>
      </tr>
      <tr> 
        <td>EBMK</td>
        <td>03/12/2007</td>
        <td>Ok</td>
        <td>1</td>
      </tr>
      <tr> 
        <td>ZXCD</td>
        <td>03/12/2007</td>
        <td>Ok</td>
        <td>6</td>
      </tr>
      <tr> 
        <td>MJKL</td>
        <td>03/12/2007</td>
        <td>Ok</td>
        <td>1</td>
      </tr>
      <tr> 
        <td>BNMH</td>
        <td>04/12/2007</td>
        <td>Ok</td>
        <td>6</td>
      </tr>
      <tr> 
        <td>HJYK</td>
        <td>04/12/2007</td>
        <td>Pendente</td>
        <td>1</td>
      </tr>
      <tr> 
        <td>WDFG</td>
        <td>04/12/2007</td>
        <td>Pendente</td>
        <td>4</td>
      </tr>
      <tr> 
        <td>ERTT</td>
        <td>04/12/2007</td>
        <td>Ok</td>
        <td>9</td>
      </tr>

</tbody>
  </table>

</div>

</div> 
</body>
</html>

Arquivo	Tipo	Tamanho	Hits
fixa_linha_cabecalho_com_linha_rodape.htm	Arquivo HTM	4,8 Kb	1032

Este código foi útil para você?

Nota	Comentário
8	denunciar viniciusop comentou em 1/9/2009 Extensão JS VReport Olá, veja essa extensão em javaScript que faz o desejado com facilidade e simplicidade: http://www.isecretaria.net/VReport/ Abraços
10	denunciar grandems comentou em 26/12/2007 Numeração de página Será que seria possível conseguir imprimir o número da página também nesse script?

Regras:
Os comentários seguem as seguintes regras:

Todos os comentários são enviados por membros cadastrados no site.
A pontuação de comentários de conteúdo do próprio membro não serão computados.
Os comentários serão pré-aprovados, porém a equipe do site revisará o conteúdo de todos os comentários podendo ser invalidados (inclusive a pontuação).
Os comentários precisam ter, obrigatóriamente, coerência sobre o conteúdo que será comentado.
O membro que atingir 5 comentários invalidados não poderá mais comentar dentro do site. Com isso o membro não poderá mais ganhar pontos com comentários.
Há um limite de 10 comentários por dia para cada membro.
Qualquer comentário após ter sido publicado poderá ser retirado através da opção ( denunciar)

Comente

Autenticação:	Apelido: Senha: (ainda não tem cadastro? clique aqui!)

Título:	Máximo de 30 caracteres
Comentário:	Máximo de 255 caracteres
Avaliação:

Equipe | Tabela de Pontos e Estrelas | Política de Privacidade | Mapa do Site | Fale Conosco

Autor

Rodrigo Araujo

Tags

DHTML