chromeでのテーブルのwidthについて

Question

お世話になっております。

今回、2つのテーブルを組み合わせて表を作成しているのですが、1つ目のheaderのwidthを2つ目のbodyと同じwidthにすることができずに困っています。
値を代入しても値が変更され、1pxずつずれるような形になっています。

テーブルの構成

<div id="table_body">
  <table id="table">
    <thead>
    <tr>
      <th>aaa</th>
      <th>bbb</th>
      <th>ccc</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>AAA</td>
      <td>BBB</td>
      <td>CCC</td>
    </tr>
    </tbody>
  </table>
</div>
<div id="table_header">
  <table id="table">
    <thead>
    <tr>
      <th>aaa</th>
      <th>bbb</th>
      <th>ccc</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
</div>

var $source = $('#table_body tr th'),
    $dest = $('#table_header tr th');
$dest.width($source.width());

簡単ですがこのような感じで表記しています。
javascript内での代入ができていない状況です。

よろしくお願いします。

Answer 1

こんにちは。

jQueryのwidth()は、ブラウザによってスクロールバーの幅も加味した値を返してしまうことが
あるようです。
参考：jQuery window の幅と高さを正確に出す方法

自分も試してみたところ、Chromeではフレーム分けしていると、
width:90pxと指定していても、
alert()で出力してみると違う値になっており、
フレーム内で再算出されているように見受けられました。

上記のようなスクロールバーがあったり、フレーム内のものだったり
しないでしょうか？？

Comments

[H--Mn]

スクロールバーを含めていたのでその部分の可能性があります。。。
参考になるサイトの紹介ありがとうございます。

Answer 2

tableのcssはリセットされてますでしょうか？

border-collapse: collapse;
border-spacing: 0;

Comments

[H--Mn]

marginとpaddingはリセットしていましたがborderはしていませんでした。
リセットしてみます、ありがとうございます。

[H--Mn]

marginとpaddingはリセットしていましたがborderはしていませんでした。
書き直して試してみます、ありがとうございます。

Answer 3

$("#table_body tr th")

のwidthは割り切れる値で、かつ均等なのでしょうか？
%指定の場合、全てのthのwidthが同値となっていないとかはないでしょうか？

Comments

[H--Mn]

返答ありがとうございます。
割り切れる数で、%指定などはしていません。
IE、FFではきちんと表示されるのですが、chromeでのみ値がずれてしまいます。
var sourceWidth = $source.width() 　←sourceWidth = 90
$dest.width($source.width());

このように代入しても$dest.width()の値が91などになってしまうのです。
なのでheaderとbodyの列がすこしずつずれてしまっています。
すみません、よろしくお願いします