Publicado em 7 de mar.

Redimensionar células de uma tabela

#desenvolvimento-frontend

Boa tarde pessoal,

Indo direto ao ponto.

Como eu faço para aumentar ou diminuir o comprimento da célula de uma tabela?

Quem nem quando clicamos no limite entre duas células e aparece uma seta pra diminuir ou aumentar o tamanho...

Estou tentando várias propriedades css, css3, 4, 5, 6 e nada =P

Estou tentando fazer, mas não sei se é algum componente específico, tabela mesmo, sei lá...

Alguém pode me dar uma luz?

Valeu o/

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

angelorubin· 7 de mar.

Boa noite,

Não tem segredo:

CSS

	border-collapse:collapse;
	border:1px solid #CCC;
}

#tabela tr {

	border:1px solid #CCC;
}

#tabela td {

	width:40px;
	height:40px;
	padding:10px;
	border:1px solid #CCC;
}
</style>

XHTML

<table id="tabela">
 <caption>
 Tabela
 </caption>
 <tr>
 <td> </td>
 <td> </td>
 <td> </td>
 <td> </td>
 <td> </td>
 </tr>
 <tr>
 <td> </td>
 <td> </td>
 <td> </td>
 <td> </td>
 <td> </td>
 </tr>
</table>

Pode utilizar também medidas relativas (em,%,etc), ao invés de píxels.

Agora se pretende torná-las redimensionáveis - http://jqueryui.com/resizable/#default

Espero que ajude.

Marcos Xavier· 8 de mar.

Lembrando que se for definido uma largura para o elemento table (width: n px), não vai funfar legal.

graviola· 2 de abr.

Valeu pessoal!

Esse jquery eu já conhecia, fiz algo parecido uma vez no trabalho o/

Só com tabelas que não tinha feito nada parecido ainda...

Obrigado ai

Até hoje ainda não resolvi isso ^^

Public2004· 3 de abr.

Dependendo do seu projeto, uma alternativa seria trabalhar com CSS3 utilizando a propriedade "resize" (não funciona IE e Opera).

Definindo a propriedade para a tabela, linha ou célula não funciona então o truque é inserir por exemplo uma "div" dentro da célula e definir o estilo "resize: horizontal;" a essa div, já que quer alterar somente na largura, ex:

<table>

<tr>

<td><div> content here </div></td>

</tr>

</table>

Lembrando que nesse caso o ideal é trabalhar com medidas em "%" e caso haja outras linhas na tabela, todas as células da coluna serão redimensionadas, ao mover uma célula.

Att.