.width() doesn't work properly in Google Chrome

[michal]

Browser: Google Chrome 3.0.195.21 ================== Code: <script type="text/javascript" src="​http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> $(document).ready(function() {

$('td').each(function() {

$(this).width(); when this line is commented - everything seems to be okay on google chrome $(this).css('width','100px');

});

}); </script> <style> th,td {width: 100px; background: yellow;} .hidden {display: none;} </style> <table> <thead><tr><th>1</th><th class="hidden">2</th><th>3</th></thead> <tbody><tr><td>4</td><td class="hidden">5</td><td>6</td></tbody> <tfoot><tr><td>7</td><td class="hidden">8</td><td>9</td></tfoot> </table>

============== When $(this).width() is executed then width for selected cell is set, even if it should return only a value of this width. [file 1.jpg]

I don't know if it's also a bug in Google Chrome, but when I try to set width with $(this).css('width','100px') I don't have this problem.

When I comment $(this).width() everything is fine [file 2.jpg]

[michal]

width() is executed

[michal]

width() is commented

[egoodberry]

I've run into this in the past; I believe the problem is more specifically related to the visibility of the table cell in question. The requirements seem to be: Google Chrome browser, in the context of a loop, working with TD or TH elements (table cells), one more more of said table cells is hidden from view (style="display:none;"). This causes some sort of assignment to occur; invisible but space-filling elements seem to be inserted into the DOM.

The only workaround for this issue of which I am aware is to find out whether or not the table cell in question is visible prior to calling its .width() function.

Hope this helps.

[SlexAxton]

Could you provide a live test case for this in a jsfiddle, we would greatly appreciate it.

Thanks!

[trac-o-bot]

Automatically closed due to 14 days of inactivity.

[[email protected]…]

Please re-open this ticket. I have created a JSfiddle example for it here:

​http://jsfiddle.net/rw123948/KGxbk/

The sample alerts the widths of several <col> elements. I have tested and it does work when you use <td> elements, but if you compare with Firefox, which does read the widths of <col> elements, you can see that there is a Chrome specific bug that causes the script to return 0 instead of the actual width.