8

Estou a criar uma tabela para inserção/consulta de dados que seja o mais parecido com o formato de uma folha excel.

A minha tabela: inserir a descrição da imagem aqui

Problema:

Como a imagem acima mostra, ao colocar uma input num td, ela não ocupa a td toda, ficando com os seus rebordos, o que fica feio. O que pretendo é definir uma class css para a input de modo a que a mesma ocupasse toda a dimensão da td e parecendo que a td e a input fossem o mesmo elemento.

4
  • Você poderia tirar a borda do <input> e o padding da célula, mas ainda ficaria estranho. Por que não usa uma lib para isso? 21/02/2014 às 10:07
  • Penso que não vale a pena importar uma lib para configurar células td 21/02/2014 às 10:23
  • Ficaria mais organizado, dependendo do que for fazer. Se essa for a única tabela da aplicação, então ok. 21/02/2014 às 10:59
  • Sim, em principio será a única. Nas restantes tabelas estou a usar DevExpress na aplicação, e queria replicar as GridViews o máximo possível. O problema é que nas GridView iria ter problemas em ter um campo para anexar ficheiros 21/02/2014 às 11:04

3 Respostas 3

10

O que parece ser necessário, apesar de não teres a tua markup na tua pergunta, é formatar o input para remover algumas das suas definições de forma a que o mesmo passe a estar a ocupar toda a célula da tabela:

Exemplo a funcionar no JSFiddle

CSS

.myCellInput{
    display:block;     // ficar um elemento bloco
    width:100%;        // ocupar toda a largura
    margin:0;          // sem margens
    padding:0;         // sem padding
    border:0 none;     // sem borda
    line-height:20px;  // linha = altura pretendida para a célula
    height:20px;       // altura = altura pretendida para a célula
}

Resultado

Captura de Tela

Notas:
Podes ver no JSFiddle que também foram dadas algumas definições à tabela em si, pois não queremos que as td tenham espaço tipo padding para que o input possa ocupar todo o seu espaço.
Assim sendo, os links ou outros elementos deverão receber formatação adequada para compensar.

2
  • Era exactamente o que procurava! Obrigado ;) 21/02/2014 às 10:47
  • Pena que não dá pra votar +2, pelo fato de usar line-height!
    – Largato
    24/02/2014 às 14:22
2

Outra alternativa além da citada pelo Zuul, é usar a propriedade contenteditable no td que você deseja tornar editável, como pode acompanhar por este exemplo no JSFiddle. Resultado: inserir a descrição da imagem aqui

1
  • Embora a do Zuul tenha sido a resposta mais completa, ao citar contenteditable a sua também é uma boa resposta 22/02/2014 às 18:45
0

Não sei se entendi bem o que deseja porem te indico uma seguinte ferramenta Jquery:

https://datatables.net/

Via Html:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/DataTables-1.7.6/jquery.dataTables.min.js" type="text/javascript"></script>

Carregar o css: Demo do plugin, você pode consegui-lo baixando a ultima versão deste plugin.

<link rel=’stylesheet’ href=’js/DataTables-1.7.6/css/demo_table_jui.css’ />
<link rel=’stylesheet’ href=’js/DataTables-1.7.6/css/demo_table.css’ />

Após carregar é necessário inicializar o script

<script type="text/javascript"> $(document).ready(function() { $(‘#teste’).dataTable( ); } ); </script>

Criar a tabela Física no Html

<table id="teste" width="100%"> <thead> <tr> <th>Nome</th> <th>Email</th> <th>Sexo</th> <th>Data Nascimento</th> <th>Nivel Escolar</th> <th>Faculdade</th> </tr> </thead> <tbody> <?php for( $i=0; $i<100; $i++ ){?> <tr> <td><?php echo $i;?></td> <td><?php echo $i+1;?></td> <td><?php echo $i+2;?></td> <td><?php echo $i+3;?></td> <td><?php echo $i+4;?></td> <td><?php echo $i+5;?></td> </tr> <?php }?> </tbody> </table>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .