Ir para conteúdo

POWERED BY:

Arquivado

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

Preis85

Overflow em td (tabela)

Por , em Desenvolvimento frontend

Recommended Posts

Preis85    0

Preis85
Postado

Me deparei com o caso de precisar fazer uma tabela para um site,

neste caso as colunas tem tamanho fixo, e o conteudo deve aparecer em apenas uma linha, o que não couber não aparece.

Mesmo que eu coloque a td com tamanho fixo, e overflo:hidden parece que o css é ignorado.

 

Eu consegui resolver o problema colocando uma div dentro da td, e atribuindo o estilo a esta div no invés da td.

Mas ficou a dúvida, será que alguem saberia resolver este problema sem ter que acrescentar esta div?

 

Não sei se ficou claro, então segue o fonte do meu teste:

podem ver que se o style da td for colocado na div funciona

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1a0 Transitional//EN" "http://wwwaw3aorg/TR/xhtml1/DTD/xhtml1-transitionaladtd">
<html xmlns="http://wwwaw3aorg/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<style>
	table { text-align:justify; padding:5px; width:680px; margin:20px 4px; }
	th { background:#eee; text-align:left; font:bold 14px verdana; padding:5px 3px; }
	td { background:#eee; padding:5px 3px; font:13px verdana; }
</style>
</head>
<body>
<table>
	<thead>
		<tr>
			<th style='width:350px'>Titulo</th>
			<th style='width:209px'>Empresa</th>
			<th style='width:85px'>Data</th>
		</tr>
	</thead>
	<tr>
		<td>Titulo de alguma coisa</td>
		<td>Nome da empresa</td>
		<td>Hoje</td>
	</tr>
	<tr>
		<td style='width:350px; height:20px; overflow:hidden'><div>Titulo de alguma coisa absurdamente tao grande que faz quebrar linha</div></td>
		<td>Nome da empresa</td>
		<td>Hoje</td>
	</tr>
	<tr>
		<td>Outro titulo de alguma coisa</td>
		<td>Nome da empresa</td>
		<td>Hoje</td>
	</tr>
</table>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Preis85    0

Preis85
Postado

Além do "overflow:hidden", e sem aplicar "height", tente declarar "white-space: nowrap".

 

Já tentei, a td cresce ignorando o width

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