I would not say that this is wrong, moreover, the table cells do not have the same box model as a div. You can see this by playing with the following:
- Use
.outerWidth() and compare with .width() - Add
display:block; into your CSS for th,td and compare the width with the default rendering of the table cell.
I think you will understand what I mean. This is also described in http://blog.anofsinger.com/2008/03/table-cell-box-model.html .
If you look at the example http://codepen.io/morewry/pen/pqGhv , here I intend to show that the inner width of the table cell will not be the same as the inner width of a div , even if both are given width:200px .
However, although this may not be the width you expect, and the width will be potentially different in each browser, the cells should be consistent in each browser.
(At least this is what I expect.) I would expect this:
- You set the width of, say, 200 pixels to a table cell.
- Firefox can return a width of 199 and IE a width of 201. These widths are accurate and reflect each cell model of a cell in a browser table.
- If you set the same width to
th , it will be displayed with the same width as td if it has the same width and fill width.
But, looking at the example again today, I saw that either automatically setting the same width for each th as the corresponding td with JavaScript or setting a wide equal width with both CSS and th sometimes ended up in the same browser other width from td . (I have some vague thoughts about this, but suffice it to say that it is really interesting when this mismatch appears [and disappears]. I compared it by setting width vs a min-width vs, giving width:100% whole table , etc.)
I believe your goal is a fixed table header. To do this, I feel that it is much better to do what Mike showed and keep it all in one table using thead and tbody. You break down the "semantics" with two different tables - th no longer related to td , except visually.
- However, you can use JavaScript something like this (it works in all my browsers at least and could be better than detecting the browser): 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. It is uncertain if this works everywhere (I don't have IE9 for one), or if it can be used in the context you need.