Solved

html table column width 0px

Posted on 2011-03-07
12
665 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 35060619
0
 
LVL 27

Accepted Solution

by:
Lukasz Chmielewski earned 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

920 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now