Improve company productivity with a Business Account.Sign Up

x
?
Solved

html table column width 0px

Posted on 2011-03-07
12
Medium Priority
?
770 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
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 

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

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

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.

Join & Write a Comment

The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
AngularJS web development a very simple procedure. So, to put it, in short, AngularJS’ stand out features are – Two-way data binding, MVC structure, directives, templates, dependency injections and testing.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

589 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