jQueryのwidth()でtdの幅指定をしようとしてはまった。

なんというか、関連するテーマが多すぎて分類できない話なんですが、事の発端は別々の表組みのtdの横幅をそろえたくて、必ず広くなる方が分かっているため、width()で値を取得して、もう一つに設定という方法を思いついた。
が、IE9でうまくいかない。

現象はこんな感じ。

・設定を取得する表（以降「取得元」）は普通。
・設定を適用する表組み（以降「設定先」）はcolspanを使っている
・tableのcellpaddingで「5」を設定している
・DOCTYPEはTransitional

この場合、Operaでは取得元のtdのwidthをとってきて、設定先のtdに入れても幅がきっちりそろったのだが、IEではやや設定先がやや狭くなる。
比較してみると、一律10ピクセル小さいことが分かった。
どうやらcellpadding分（左右分だから5×2）だけ小さくなっているようだったので、試しにcellpaddingを0にしてみたらきっちり合った。

IEのTransitionalの場合、jQueryのwidth()は、「取得する値にはpaddingを含まない値」をとってくるが、width(数値)で値を設定する場合は、「設定した値にはpaddingを含んでいる」ということだろうか。
この現象はcolspanを使っているときに発生するらしい。

試しにCOCTYPEをStrictにしてみたところ、Operaでもうまくいかなくなってしまったりして、どうも表組みのtdの幅というのはcolspanを使っているセルがある場合にいろいろ怪しいみたいだ。
colspanを設定しているセルに対してもきちっと適正なwidthを設定すればいいのだろうけど、そりゃめんどくさかったので却下。

結局tdの中にdivを入れて、div通しで幅を合わせる方法に変更。
コードが長くなるが、とりあえずcellpaddingやcolspanに影響されずに二つの表組みの間でセルの横幅を合わせることができた。

これはjQueryというより、HTMLとCSSについての話になるのかな。
結果的にはかなり強引な解決方法になってしまった。。。