Enio Marcelo: Colocar uma barra de rolagem dentro de uma célula de tabela

sexta-feira, 30 de dezembro de 2011

Colocar uma barra de rolagem dentro de uma célula de tabela

Nesta dica vou mostrar como dimensionar uma área fixa com barra de rolagem [ usando CSS é claro :-) ] para ser inserida dentro de uma célula de tabela. A inspiração para esta dica veio de um post em um fórum CSS.

Vamos usar uma tabela com 03 linhas e 03 colunas na qual nossa área com scroll vai ser colocada dentro da célula central. A técnica é válida para qualquer célula em qualquer tabela.

Nossa primeira providência é a de definir um elemento HTML para conter a área com scroll para então estilizá-lo. Um elemento bastante próprio para esta finalidade é o elemento <div> e os parâmentros de estilização são os listados a seguir.

área com scroll............largura=200px, altura=100px;
letras na área...............cor vermelha;
padding.....................5px ( para separar o texto das extremidades da área. )

A regra CSS a ser aplicada no elemento div é mostrada abaixo:

div {
width:200px;
height:100px;
overflow: auto;

}

E, quem constrói a barra de rolagem é a regra overflow.

E, a seguir o código completo para você copiar e colar no seu editor e fazer mudanças para entender como colocar uma barra de rolagem.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
 Transitional//EN">
<html>
<head>
<title> Scroll dentro de uma célula de tabela</title>
<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1">
<head>
<style type="text/css">
<!--
table { 
border-collapse:collapse; 
border:2px solid #FF0000; 
background-color:#FFFFFF;
}
td {border:1px solid #003366; 
color:#cccccc;
}
td div {
color:#FF0000; 
padding:5px; 
width:200px; 
height:100px; 
overflow:auto; 
}
-->
</style>
</head>
<body>
 <table>
 <tr>
    <td>célula</td>
    <td>célula</td>
    <td>célula</td>
 </tr>
 <tr>
   <td>célula</td>
   <td><div>Como faço pra colocar uma barra de rolagem 
dentro de uma celula preciso disso com urgencia obrigado. 
Como faço pra colocar uma barra de rolagem dentro de uma
celula preciso disso com urgencia  obrigado. Como faço 
pra colocar uma barra de rolagem dentro de uma celula 
preciso disso com urgencia  obrigado. Como faço pra 
colocar uma barra de rolagem dentro de uma celula preciso 
disso com urgencia  obrigado.
</div>
  </td>
   <td>célula</td>
 </tr>
 <tr>
   <td>célula</td>
   <td>célula</td>
   <td>célula</td>
 </tr>
</table>
</body>
</html>

E, abaixo a tabela com a área de scroll renderizada pelo browser.

célula	célula	célula
célula	Como faço pra colocar uma barra de rolagem dentro de uma celula preciso disso com urgencia obrigado. Como faço pra colocar uma barra de rolagem dentro de uma celula preciso disso com urgencia obrigado. Como faço pra colocar uma barra de rolagem dentro de uma celula preciso disso com urgencia obrigado. Como faço pra colocar uma barra de rolagem dentro de uma celula preciso disso com urgencia obrigado.	célula
célula	célula	célula