How do I change the column width in a table using JavaScript?

Question

I'm trying to switch the width of two columns in a table when a user clicks on an image. I'm using a JavaScript on click even and if I put the new column width as % it works but it doesn't seem to work using px or em which is wht I want use to have better control over the columns. This is the code I'm using:

<img alt="Change Widths" title="Switch column widths" src="/*images_path*/*image*.png" onclick="for (j=1;j<=200;j++){document.getElementById('cola'+j).style.width = '60%'; document.getElementById('colb'+j).style.width = '28%';}" onmouseover="this.style.cursor='pointer';"/>

I'm using Firefox is that makes a difference. Can anyone help me?

If you're trying to decrease the size of the cells, you may run into trouble if you're trying to decrease it to a size less than the width of the contained text. I'd suggest setting overflow: hidden and white-space: nowrap on your cells. Note, however, that this will end up hiding content that overflows the cell. — Ryan Kinal
– Ryan Kinal, Commented Feb 18, 2011 at 14:00

Yasen · Accepted Answer · 2011-02-18 14:02:58Z

0

Try using document.getElementById().width instead of .style.width

answered Feb 18, 2011 at 14:02

Yasen

16

Sign up to request clarification or add additional context in comments.

Comments

TomCDona · Accepted Answer · 2011-02-18 13:58:53Z

0

It's worked for me selecting an ID on the TD of the table to change and setting .width to a px value. I never used .style.width, just .width.

answered Feb 18, 2011 at 13:58

TomCDona

1482 silver badges10 bronze badges

Collectives™ on Stack Overflow

How do I change the column width in a table using JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related