unable to resize table beyond certain minimum width

Question

Here is a demo page:

http://bridgetandmisha.com/resize%5Fsizes.html#

Why am i unable to resize one of the tables to be 400px using this code:

$("#countProductSummaryDetailTable").width(400)

Can someone tell me what html markup is preventing this?

Also, i am able to resize another table on the page to 400px (but that is not what i need):

$("#countProductSummaryHeaderTable").width(400)

Answer 1

Pretty sure it's because you've set explicit widths on all of the columns. They add up to 1013px, and the table won't get any smaller than that, because then its columns wouldn't fit inside it (which isn't legal). If, for example, I twiddle the two 200px columns (product name and category) down to 100px each, then the table will resize down to 813px, but no smaller than that.

Answer 2

What those lines of jQuery do is add style="width: 400px" to those table elements. And if you check the DOM, you'll see that they both succeed at doing that.

However, you've also set explicit widths on some of the tables' cells. For the detail table those widths add up to ~900 pixels. For the header table they add up to ~500 pixels. And on tables, those widths specify the minimum width of the column.

So the reason your resize is failing is because the table's columns force a minimum width on the tables larger than the 400 pixels you want it to be.

Also note that the second resize fails too. The table doesn't end up being 400 pixels wide, but closer to 500 for the same reason.