overflow: hidden tr

[soltek]

Hey mates, I'm having some problems with an html table.

I'm trying to do the table flexible to different screen resolutions.

The data inside that tr is kinda long, so, at small resolution, the tr would be small also and the content inside (a phrase) would be clipped using overflow: hidden. When the screen is large enough... well, you got the idea.

 

The thing is the overflow:hidden isnt working at all and i think is because it needs to have a fixed width, not a % width.

Take a look at my code, please:

 

HTML

	<table class=tabela>
	<tr class=coluna1>
	<td class=linha1>1234567891011121314151617181920212223242526272829303132343536373839404142434445464748495051525354555657585960</td>
	<td class=linha2>2</td>
	<td class=linha3>3</td>
	</tr>
</table>

 

 

CSS

.tabela {
width: 100%;
cellpading: 0;
cellspacing: 0;	
}

.coluna1 {
background-color: white;
}

.linha1 {
width: 50%;
max-width: 50%;
overflow: hidden;
}[/code

Can you think of a solution for this?
Thanks

[analog]

You need to add table-layout: fixed; to the .tabela class for it size the cells correctly.

 

So it would become:

 

.tabela {
width: 100%;
cellpading: 0;
cellspacing: 0;	
table-layout: fixed;
}

 

That should make it work how you want.

 

More information: http://www.w3schools.com/css/pr_tab_table-layout.asp

[soltek]

Damn, CSS rocks.

And so do you  , I really appreciate your help, mate.

 

Thanks you very much.