Solved

html table column width 0px

Posted on 2011-03-07
12
656 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
LVL 27

Expert Comment

by:Lukasz Chmielewski
Comment Utility
0
 
LVL 27

Accepted Solution

by:
Lukasz Chmielewski earned 500 total points
Comment Utility
0
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Sure.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

762 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

8 Experts available now in Live!

Get 1:1 Help Now