jquery width() seems wrong in every browser I try except FF4

Question

I'm trying to accurately get the width of a <td> element. The results are what I expect in FF4 but in IE9/Safari 5 the result I get is 1 pixel off. It's been driving me crazy.

UPDATE:

My ultimate goal is to take the width from the cells in the ROWS table & apply it to the HEADER table's cells so each table's cells align perfectly. Doing this so it works for all browsers is my problem.

Here's a simple example: http://jsfiddle.net/XwNEj/16/

Works in FF4 only :( I'd greatly appreciate any help getting this work on all modern browsers.

Answer 1

For fixed table headings see this post, or try this for a pure css solution.

Answer 2

I wouldn't say it's wrong precisely, it's more that table cells don't have the same box model as a div. You can see this by playing around with the following:

• Use .outerWidth() and compare to .width()
• Add display:block; to your CSS for th,td and compare widths with the default table cell rendering.

I think you'll see what I mean. This is also documented at http://blog.anofsinger.com/2008/03/table-cell-box-model.html.

If you view the example http://codepen.io/morewry/pen/pqGhv here my intention is to show that the interior width of a table cell won't be the same as the interior width of a div, even if both are given width:200px.

However, while it might not be the width that you'd expect, and the width will potentially be different in each browser, the cells ought to be consistent within each browser.

(At least, that's what I'd expect.) I'd expect this:

• You set a width of, say, 200 pixels to a table cell.
• Firefox might return a width of 199 and IE a width of 201. Those widths are accurate and reflect each browser's table cell box model.
• If you set the same width to the th, it will render at the same width as the td as long as it has the same border and padding width.

But after looking at the example again today I saw that, either automatically setting the same width to each th as to its corresponding td with JavaScript or setting a generous equal width to both with CSS, the th sometimes ended up a different width from the td in the same browser. (I have some sort of inarticulable thoughts about this, but suffice it to say it's really interesting when this discrepancy appears [and disappears]. I compared it setting a width vs a min-width vs giving width:100% to the whole table, etc.)

I take it your goal is a fixed table header. For that, I do feel that it's much better to do as Mike showed and keep it all in one table using thead and tbody. You break the "semantics" by using two different tables--the th no longer has any relationship with the td, except visually.

• However, you could use JavaScript something like this (it works in all my browsers at least and might be better than browser detection): http://codepen.io/morewry/pen/toCqs
• Using markup/CSS like this also fixed the problem for me http://codepen.io/morewry/pen/gjELD without JavaScript. Uncertain if this works everywhere (I don't have IE9 for one) or if it can be used in the context you need.