Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Falae, galera :)
To com um problema um tanto quanto chato de se resolver.
Vejam este código abaixo, se quiserem executar na makina de vocês para uma melhor visualização, seria legal:
<table style="border: 1px solid #000000;" cellpadding="2"> <tr> <td style="width:50px; border: 1px solid #FF0000;" nowrap><div style="overflow: hidden; width: 100%; border: 1px solid #00FF00;" nowrap>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> <td style="width:50px; border: 1px solid #FF0000;" nowrap><div style="overflow: hidden; width: 100%; border: 1px solid #00FF00;" nowrap>aa</div></td> <td style="width:50px; border: 1px solid #FF0000;" nowrap><div style="overflow: hidden; width: 100%; border: 1px solid #00FF00;" nowrap>aa</div></td> <td style="width:50px; border: 1px solid #FF0000;" nowrap><div style="overflow: hidden; width: 100%; border: 1px solid #00FF00;" nowrap>aa</div></td> <td style="width:50px; border: 1px solid #FF0000;" nowrap><div style="overflow: hidden; width: 100%; border: 1px solid #00FF00;" nowrap>aa</div></td> </tr></table>
Isso mesmo, é uma tabela bem simplezinha com alguns atributos relevantes.
Como vocês podem ver, a div da primeira coluna está com um overflow hidden, como todas as outras, e um nowrap para esconder o texto que vem depois.
Eis o problema: percebem que a div teve seu tamanho dimiuído pro mesmo tamanho da td (50px), mas o tamanho real da td no browser está do mesmo tamanho da div sem overflow, sem nowrap e sem nada?
façam o teste, tirem o nowrap e o overflow dela e verão que o aaaaaaaaaaaaaaaaaaaaaaaaaaaa aparece inteiro na div.
Sacaram o problema?? eu não quero que isso aconteça.... eu quero que, mesmo que haja um texto gigante dentro da div, ela fique do mesmo tamanho da td (50px) sem prejudicar o tamanho da td em si.
Há algum jeito de fazer isso??
Detalhe: PRECISO que isso funcione apenas no I.E 5.0 pra frente... não me interessa se funciona em firefox, opera ou outro navegador, funcionando no IEca tá bom. Isso pq essa dúvida é de um projeto não-web onde todas as máquinas rodarão unicamente I.E. 5.0.
Agradeço qualquer ajuda desde já :D
Valeu!
estou com a mesma duvida =/
não tem mesmo como deixar 100% o tamanho da div?
no firefox funciona perfeitamente, mas no IE a div parece que não aplica o overflow:hidden
valeu!
Pra mim o mais correto, seria não usar DIVs em composição com os TDs....
afinal, tabela para layout? ou sei lá oque é isso....
Poste uma imagem doque você qr, tenho certeza que deve existir uma "simples solução, mais tableless" para isso.
>
Pra mim o mais correto, seria não usar DIVs em composição com os TDs....
afinal, tabela para layout? ou sei lá oque é isso....
Poste uma imagem doque você qr, tenho certeza que deve existir uma "simples solução, mais tableless" para isso.
opa, tah ae o codigo, soh cola em um htm e visualizar no browser:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<TABLE style="table-layout: fixed" BORDER="1" cellpadding="4" width="100%">
<TR STYLE="font-weight:bold;">
<TD width="10%"><div style="width:100%; overflow:hidden">site_id</div></TD>
<TD width="10%"><div style="width:100%; overflow:hidden">site_md</div></TD>
<TD width="15%"><div style="width:100%; overflow:hidden">site_name</div></TD>
<TD width="25%"><div style="width:100%; overflow:hidden">site_url</div></TD>
<TD width="13%"><div style="width:100%; overflow:hidden">date_added</div></TD>
<TD width="25%"><div style="width:100%; overflow:hidden">comments</div></TD>
<TD width="2%"><div style="width:100%; overflow:hidden">email</div></TD>
</TR>
<TR>
<TD><div style="width:100%; overflow:hidden">445</div></TD>
<TD><div style="width:100%; overflow:hidden">00cff132ee9312e3b01948a04c22c994</div></TD>
<TD><div style="width:100%; overflow:hidden">somesite</div></TD>
<TD><div style="width:100%; overflow:hidden">[http://www.somedomain.com/promotions/popstarts/poptchallenge/invite.html](http://www.somedomain.com/promotions/popstarts/poptchallenge/invite.html)
<TD><div style="width:100%; overflow:hidden">2005-05-20</div></TD>
<TD><div style="width:100%; overflow:hidden">some comments here</div></TD>
<TD><div style="width:100%; overflow:hidden">some@email.com</div></TD>
</TR>
</TABLE>
</body>
</html>ah e com a tabela como 100% tbm.. tentei de tudo jah.. procurei em forum gringo, fussei no google, mas num tah dandu certo =/ se alguem tiver uma luz eu agradeço imensamente!
valeu!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif
Declare para a div uma largura de 50px e não 100%, ou seja width:50px.
Retire o atributo nowrap da td e da div. Ele não está tendo qualquer função.