CSSでスクロールバーがついていて画面比率が変わってもずれないtableを作りたい

Question

いつもお世話になっています。

jspでテーブルを作成するときに、ＣＳＳを用いてＤＢ一覧を作っています。
ちょうど以下の図のようなものです。

|①|②|③|④|⑤| ←ヘッダ
①|あ|い|う|え|お| }
②|か|き|く|け|こ| } ボディ
③|さ|し|す|せ|そ| }

現在ヘッダを固定したままデータにスクロールバーを付けることに成功しています。
スクロールバーはＣＳＳでoverflow:auto;を使って実装しました。

「デスクトップやノートでも同じように表示したい」という要望がありましたので、画面の比率や文字の大きさが変わってもきちんと表示できるようテーブルの幅を％で定義しました。
すると同じ幅の割合にしてもヘッダ部分とボディ部分にずれが発生し、うまくかみ合いません。
固定値だったらうまくいきますが、画面の比率を小さくすると右横に隙間ができてしまいます。

①ヘッダとボディに分けて、ボディにだけスクロールバーを付ける
②画面の比率が変わっても、画面の大きさに応じてテーブルの幅が変わる
③ヘッダとボディがずれない
この3つの条件をクリアするtableは作れないのでしょうか？

Answer 1

やることによって限界はあると思いますが、
基本的に「コモンのやり方」に習ったほうがいいです。
いろんな人が利用している＝安定して動作してくれる
というのが大きな理由です。

さて、grid.jsの適用をしてみてはいかがでしょうか。
grid.jsについてはここも参考になります。