Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

html table column width 0px

Posted on 2011-03-07
12
Medium Priority
?
757 Views
Last Modified: 2012-05-11
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
0
Comment
Question by:mesX
  • 7
  • 5
12 Comments
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 35056445
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
 

Author Comment

by:mesX
ID: 35056557
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
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 35056665
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:mesX
ID: 35056797
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
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 35056905
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
 

Author Comment

by:mesX
ID: 35057795
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
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 35060619
0
 
LVL 27

Accepted Solution

by:
Lukasz Chmielewski earned 2000 total points
ID: 35060643
0
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 35060656
I think the tricky part would come with multiple panels open, where every one of them would have to be equal width.
0
 

Author Comment

by:mesX
ID: 35080603
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
 

Author Closing Comment

by:mesX
ID: 35080609
Thank you very much for all your help and for the useful links!
I hope, i may count on you next time ;)
0
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 35080656
Sure.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

782 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question