Ir para conteúdo

Arquivado

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

graviola

Redimensionar células de uma tabela

Recommended Posts

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/

Compartilhar este post


Link para o post
Compartilhar em outros sites

Boa noite,

 

Não tem segredo:

 

CSS

<style type="text/css">
table {
	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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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 ^^

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.