Campo input text width: 100%

[rafaeldorazio 2]

<table id="gridview" class="gridview" width="50%" cellpadding="0" cellspacing="0"><thead><tr><td style="width: 25%;" id="cod_cliente" class="cellHeader">Cod. Cliente<img src="img/gridView/filter.png" onclick="$(this).typeFilter(jQuery(this).position().top, jQuery(this).position().left);" style="float: right; cursor: pointer;" alt=""></td><td style="width: 50%;" id="nome_cliente" class="cellHeader">Nome do Cliente<img src="img/gridView/filter.png" onclick="$(this).typeFilter(jQuery(this).position().top, jQuery(this).position().left);" style="float: right; cursor: pointer;" alt=""></td><td style="width: 25%;" id="cpf_cliente" class="cellHeader">CPF<img src="img/gridView/filter.png" onclick="$(this).typeFilter(jQuery(this).position().top, jQuery(this).position().left);" style="float: right; cursor: pointer;" alt=""></td></tr><tr><td class="cellFilter"><div style="margin-left: 2px;"><input class="fieldFilter" valuefilter="0" type="text" id="txt_0" onkeyup="$(txt_0).filter(this, 'event');"></div></td><td class="cellFilter"><div style="margin-left: 2px;"><input class="fieldFilter" valuefilter="0" type="text" id="txt_1" onkeyup="$(txt_1).filter(this, 'event');"></div></td><td class="cellFilter"><div style="margin-left: 2px;"><input class="fieldFilter" valuefilter="0" type="text" id="txt_2" onkeyup="$(txt_2).filter(this, 'event');"></div></td></tr></thead><tbody><tr><td id="cod_cliente" class="cellRow">1</td><td id="nome_cliente" class="cellRow">Rafael Fernandes D Orazio</td><td id="cpf_cliente" class="cellRow">352.682.158-40</td></tr><tr><td id="cod_cliente" class="cellRow">2</td><td id="nome_cliente" class="cellRow">Teste</td><td id="cpf_cliente" class="cellRow">053.861.388-20</td></tr><tr><td id="cod_cliente" class="cellRow">3</td><td id="nome_cliente" class="cellRow">Janio Fernandes D Orazio</td><td id="cpf_cliente" class="cellRow">302.632.158-50</td></tr></tbody></table>

 

o campo text da td do nome não fica 100% , pq ?

[Henrique Barcelos 290]

Já começou errado fazendo em tabelas...

Mas enfim, corrija seu código aí colocando quebras de linha e poste um print screen para vermos o que se passa...

[rafaeldorazio 2]

Entao henrique eu até queria fazer com divs, mas eu nao saberia como fazer um grid assim.

Eu sou a favor das divs e abolir as tables mas nesse caso terei que fazer com table, seria mais simples com div ?

 

 

<table id="gridview" class="gridview" width="50%" cellpadding="0" cellspacing="0">
   <thead>
       <tr>
           <td style="width: 25%;" id="cod_cliente" class="cellHeader">Cod. Cliente<img src="img/gridView/filter.png" onclick="$(this).typeFilter(jQuery(this).position().top, jQuery(this).position().left);" style="float: right; cursor: pointer;" alt=""></td>
           <td style="width: 50%;" id="nome_cliente" class="cellHeader">Nome do Cliente<img src="img/gridView/filter.png" onclick="$(this).typeFilter(jQuery(this).position().top, jQuery(this).position().left);" style="float: right; cursor: pointer;" alt=""></td>
           <td style="width: 25%;" id="cpf_cliente" class="cellHeader">CPF<img src="img/gridView/filter.png" onclick="$(this).typeFilter(jQuery(this).position().top, jQuery(this).position().left);" style="float: right; cursor: pointer;" alt=""></td>
       </tr>
       <tr>
           <td class="cellFilter"><div style="margin-left: 2px;"><input class="fieldFilter" valuefilter="0" type="text" id="txt_0" onkeyup="$(txt_0).filter(this, 'event');"></div></td>
           <td class="cellFilter"><div style="margin-left: 2px;"><input class="fieldFilter" valuefilter="0" type="text" id="txt_1" onkeyup="$(txt_1).filter(this, 'event');"></div></td>
           <td class="cellFilter"><div style="margin-left: 2px;"><input class="fieldFilter" valuefilter="0" type="text" id="txt_2" onkeyup="$(txt_2).filter(this, 'event');"></div></td>
       </tr>
   </thead>
   <tbody>
       <tr>            
           <td id="cod_cliente" class="cellRow">1</td>
           <td id="nome_cliente" class="cellRow">Rafael Fernandes D Orazio</td>
           <td id="cpf_cliente" class="cellRow">753.159.987-52</td>
       </tr>
       <tr>
           <td id="cod_cliente" class="cellRow">2</td>
           <td id="nome_cliente" class="cellRow">Meire Fernandes D Orazio</td>
           <td id="cpf_cliente" class="cellRow">853.856.321-89</td>
       </tr>
       <tr>
           <td id="cod_cliente" class="cellRow">3</td>
           <td id="nome_cliente" class="cellRow">Janio Fernandes D Orazio</td>
           <td id="cpf_cliente" class="cellRow">302.458.987-85</td>
       </tr>
   </tbody>
</table>

[Henrique Barcelos 290]

Posta um print srceen para vermos o que está acontecendo...

[rafaeldorazio 2]

Segue o link:

http://imageshack.us/photo/my-images/37/linkcu.jpg/

 

veja que na coluna do meio o campo input type="text" ele não está 100% da td !

[Henrique Barcelos 290]

Tente assim no CSS:

input[type=text] {
display: block;
}

Não tenho certeza que vai funcionar, o melhor mesmo seria definir a largura do input para o mesmo tamanho da célula...

[rafaeldorazio 2]

não funcionou com o display: block e nem setando o width igual ao do td o tamanho do campo fica igual a da imagem pois está em %.

[rafaeldorazio 2]

nao deu certo henrique, mesmo eu colocando o width do campo igual a da td, o campo ultrapassa a borda da td !

[Henrique Barcelos 290]

Diminua então um pouco da largura do campo até se ajustar com a tabela...

[rafaeldorazio 2]

o rpblema que eu monto no voo a coluna.

Eu estou começando a desenvolver com divs, abandonei table, vamos ver se com div daa certo

[angelorubin 142]

Boa noite,

 

Em minha opinião e segundo a orientação do W3C se são dados tabulares, o ideal é utilizar tabelas exatamente como você esta fazendo.

 

Note que você esta manipulando duas coisas:

 

1 - O tamanho da td.

2 - O tamanho do input que esta dentro da td.

 

Creio que algo assim ajude:

 

.cellFilter {
width:33%;
}

.cellFilter input {
width:97%;
}

 

Sugestão de Leitura:

 

Semântica de Tabelas

 

Estilizando Tabelas

 

Espero que ajude.

[rafaeldorazio 2]

vlw, vou dar uma estudada nos links.

 

Grato pela ajuda.

 

OBS: As vezes a div [e pior que usar table, pois d[a mais trabalho, na minha umilde opiniáo.