Why is the Javascript width of a table cell one pixel too short?
css, firefox, google-chrome, javascript, jquery
Solution
I think the problem in every browser but Opera is actually something jQuery is doing with its `width()` function; it has custom hooks for width and height and it doesn't always return the true computed width. When I use `window.getComputedStyle` to get the widths of these table cells, it does indeed give me the proper rendered width. I am going to report Opera's `window.getComputedStyle` output as a bug, because it doesn't seem to give you the proper rendered width even when you bypass jQuery.
Problem
When you apply `border-collapse: collapse;` to a table to "meld" its cells' borders together, it starts causing problems in determining the widths of table cells in Javascript. For example, look at this page: http://game-point.net/misc/browserTests/scratchpads/jsTableWidth/ There are two tables, one with collapsed borders and one without. If you click on a row in the one without collapsed borders, jQuery's innerWidth and outerWidth functions report what I would expect to see (the content width, and the content plus the border width respectively; there is no padding). However, if you click on a row in the table with collapsed borders, you get browser-inconsistent behaviour, especially on the `clientWidth` property. In Firefox, `clientWidth` is the same as `width()`. In IE and Chrome, it's 1 pixel higher, and in Opera, it's the same as `width()`, but Opera's `width()` is too small. In fact, the `width()` is one pixel too small in all the browsers I've tested except for Firefox. So if you take a screenshot and the content is actually 80px, `width()` is 79px (jQuery gets it from the calculated CSS value). Why is this? I'm wanting to get the width of the actual content. I can't seem to use `width()` because only Firefox gets that right with collapsed borders. I can't use `outerWidth()` because that includes the borders (or maybe just one border, seeing as it's only 1px larger than the actual content width). I can't use `clientWidth` because its value is inconsistent between browsers. What should I do and why is `width()` 1px too short in most browsers when borders are collapsed?