Ir para conteúdo

POWERED BY:

Arquivado

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

Thompson

Aplicação correta de overflow numa TD

Por , em Desenvolvimento frontend

Recommended Posts

Thompson    0

Thompson
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

André Castro    0

André Castro
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

André Castro    0

André Castro
Postado

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">
<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</div></TD>
			<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>

o q eu queria eh q o overflow:hidden das divs funsionassem, mesmo sendo 100%, sem definir em px.. pq em px funciona..

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito