Home/ Questions/Q 8821719
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T05:55:33+00:00

When you apply border-collapse: collapse; to a table to meld its cells’ borders together,

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0