html table column width 0px

Hi,
how can i change the width of a html table column regardless of the content? When i change the width of a column to less pixels, than the content, the colum ignores the pixels and uses some minimum width to display the content.
My test code:
 
<table style="width:100%;height:100%;">
		<tr>
		
		
		<td id="one" style="border:1px solid black; width:200px;">
			test1
		</td>
		<td id="two" style="border:1px solid black; width:0px; overflow: hidden;">
			test2 (Collapsed)
		</td>
		<td id="testx" style="border:1px solid black; width:200px;">
			test3
		</td>
		<td id="three" style="border:1px solid black;">
			test4
		</td>
		
		</tr>
	</table>

Open in new window


As you see, the second column is still showing the text but i've set it to 0px width.
(The last column has no specified width because it should fill the rest of the viewport)

Why?
I'm currently building a complex layout which will be used by my ExtJS web application and i need to collapse and expand columns width javascript.

Could you help me please?

best regards
Manuel
mesXAsked:
Who is Participating?
 
Lukasz ChmielewskiCommented:
0
 
Lukasz ChmielewskiCommented:
Try

<table style="width:100%;height:100%;">
		<tr>
		
		
		<td id="one" style="border:1px solid black; width:200px;">
			test1
		</td>
		<td id="two" style="border:1px solid black; width:0px; overflow: hidden; display: none;">
			test2 (Collapsed)
		</td>
		<td id="testx" style="border:1px solid black; width:200px;">
			test3
		</td>
		<td id="three" style="border:1px solid black;">
			test4
		</td>
		
		</tr>
	</table>

Open in new window

0
 
mesXAuthor Commented:
Thx for the solution, the only problem is, that i can't use the display:hidden attribute because the collapsing (setting width to 0x) and expanding (setting width to whatever specified in the javascript expand function(example 200px)) will be animated.

So there should be a smooth animation when changing the width from 200px to 0px.

Or do you think there is no other solution for this, than using the display: none attribute?

best regards
Manuel
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
Lukasz ChmielewskiCommented:
This is different
visibility: hidden;
display: none;

Go on and try it. I think the display: hidden is the best thing to do, as we're talking about cross browser compatibility. What you can do with divs is what you can't do with tables. Table cell will have the width of the characters inside, so setting it to 0 would be pointless, because there had to be no text inside. With div approach you can adjust it's margin to -x points, having him hidden behind the previous one.

I'm curious, do you use jQuery or just plain javascript to do this ?
And what would be the expand animation bound to ? I mean a button or link...
jQuery provides a whole lot of that kind of solutions with just 3 lines of code.
0
 
mesXAuthor Commented:
I'm using ExtJS library and the animations will be bound to a button.
The problem is, that ExtJS does not provide a LayoutManager for Containers in one row which are collapsible and expandable so i have to create my own...

My idea is, depending on the pressed Button, some panels (within the table) will collapse and others will expand. Of course i would like to use only Divs to do that without any tables but for my understanding, this is not possible.

It should look like this:

#######################################
#+-----+-----+-----+-----------------+#
#|pan1 |pan2 |pan3 |pan4:            |#
#|     |     |     | uses rest of    |#
#|     |     |     | free space      |#
#|     |     |     |                 |#
#|     |     |     |                 |#
#|     |     |     |                 |#
#|     |     |     |                 |#
#|     |     |     |                 |#
#|     |     |     |                 |#
#|     |     |     |                 |#
#|     |     |     |                 |#
#|     |     |     |                 |#
#+-----+-----+-----+-----------------+#
#######################################

Open in new window


when one button is pressed, pan1 collapses and pan2 expands. when another button is pressed, pan2 expands and pan1 and pan3 collapses.
when the last button is pressed, pan1, pan2 and pan3 collapses and only pan4 is visible (using the whole space of the viewport)
(pan4 always fits to the remaining free space of the viewport.)

And all this should be animated...
That is why i had the idea using a table because as long as the width is not set to 0, the resizing works fine.
0
 
Lukasz ChmielewskiCommented:
I'm sure it can be done using divs instead of table cells. Take a look here, maybe it's not an accurate example, but I think this goes the way you want (a horizontal one)
http://docs.jquery.com/UI/Accordion

But this is all possible with getting the viewport and adjusting the div widths to fill the whole space.
Say what you think ?
0
 
mesXAuthor Commented:
Well... this is exactly what i want (Exept, that not only one panel at a time can be displayed but also many) but an Accordion layout is no big deal. this comes with ExtJS built in and there also some extensions on the web but i need a vertical way and this seems to be very hard to do :(
0
 
Lukasz ChmielewskiCommented:
0
 
Lukasz ChmielewskiCommented:
I think the tricky part would come with multiple panels open, where every one of them would have to be equal width.
0
 
mesXAuthor Commented:
Hi, i found asolution for my problem:
In CSS, i specify "table-layout: fixed". In this case, the cells dont calculate the size by themselves, so if i change the width of a cell by javascript, the cell is doing exactly what i want (and that pritty fast ;) ).

http://www.w3schools.com/Css/pr_tab_table-layout.asp

So in my case, cells with a specified width will exactly use that width and cells without a specified width will use the remaining space ;)
0
 
mesXAuthor Commented:
Thank you very much for all your help and for the useful links!
I hope, i may count on you next time ;)
0
 
Lukasz ChmielewskiCommented:
Sure.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.