テーブルでテーブル部のみスクロールさせる場合、inputの分だけ1pxずれる

Question

テーブルでヘッダーを固定して、ボディのみスクロールさせたいです。
その際にヘッダーとボディ部に input 要素があると、ヘッダーとボディがborderのpx分ずれてしまいます。
どのようにすれば、ずれなくなりますでしょうか？

ご存知の方、ご教示頂ければ幸いです。
よろしくお願い致します。

<div style="margin:20px;">
<table class="table">
    <thead>
        <tr>
            <th class="record_0">ずれない</th>
            <th class="record_0">border分ずれる</th>
            <th class="record_1">th:120px</th>
            <th class="record_2">いいい</th>
            <th class="record_3">ううう</th>
            <th class="record_4">えええ</th>
            <th class="record_5">おおお</th>
        </tr>
    </thead>
    <tbody>
      <?php for($i=0; $i<20; $i++){?>
        <tr>
        	<td>td:120px</td>
        	<td><input type="text" class="record_0" value="td:121px"></td>
        	<td><input type="text" class="record_1" value="input:120px"></td>
        	<td><input type="text" class="record_2"></td>
        	<td><input type="text" class="record_3"></td>
        	<td><input type="text" class="record_4"></td>
        	<td><input type="text" class="record_5"></td>
        </tr>
      <?php }?>
    </tbody>
</table>
</div>

thead,tbody {
    display: block; /* スクロールさせるために変更 */
}
table{
	width: auto !important;
}
tbody, thead, td, th{
	border: solid 3px;	/* ずれるのがわかりやすいように線を太く */
	border-collapse: collapse;　/* 動いてない？ */
}
tbody{
    overflow-y: scroll;
    height: 200px;
}

td,th {
    table-layout: fixed;
}
th{
	background: #eef85766;
}
td{
	padding: 0px !important;
}
.record_0,
.record_1{
	width:120px;
	height:40px;
}
.record_2{
	width:200px;
	height:40px;
}
.record_3,
.record_4,
.record_5
{
	width:70px;
	height:40px;
}

/* スマートじゃなさそう、もっといい方法はないのか？*/
th.record_xxx{
  width: 99px;
}
td.record_xxx{
  width: 100px;
}

【追記】
今回作成したい画面として、行数が最大100行近くの画面となります。
そのため、可能な限りjavascriptなどでのDOM操作は控えたいと考えています。
HTML, CSSで設定できる方法はないでしょうか？
※最初から1pxを考慮して、widthを指定するのはスマートな感じがしないため、よりよい方法があればご教授いただければ幸いです。

Answer 1

スクロールテーブルを実装する際の注意点
http://defghi1977-onblog.blogspot.jp/2012/02/blog-post_09.html

はるか昔に調査した内容で良ければこちらをご覧ください.
このようなtable要素に「スクロール機能」持たせる場合, 全ての要求に対処できる黄金パターンは存在しません.

※最初から1pxを考慮して、widthを指定するのはスマートな感じがしないため、よりよい方法があればご教授いただければ幸いです。

残念ながらスマートな方法が無いので, 泥臭くスタイルを指定するしかありません.

Comments

[K.T_build]

回答ありがとうございます。
リンク先拝見致しました。
③display:block法　で進めてみてクロスブラウザテストしてみます。
わかりやすい資料で助かりました。

【追記】
最新の更新を見たらアイギスの話題だったので吹きましたｗ
ゲームしやすいようにユーザースクリプトも書いてるとは頭黒王子の鏡ですね。
ラピスおりゅ?

[defghi1977]

ラピスは居ませんがスクロールテーブルの実装は茨の道です.
ご武運を

Answer 2

tableに border-collapse: collapseを指定して
全ての列に固定値のwidthを与えるか
window.load後にヘッダ部分、body部分のそれぞれの列の幅を計算して
それぞれ長い方にあわせてはどうでしょうか？

Comments

[K.T_build]

回答有難うございます。
>>tableに border-collapse: collapseを指定
　　display:block に変更した関係上、上手く適用できないみたいです。
　　thead{ display:table }, tbody{ display:block; } でも同様でした。

>>全ての列に固定値のwidthを与える
　　確かにその方法ではできるのはわかっているのですが、後々の保守に影響が出そうなのが、、、。
　　今のところは最終手段として考えております。

>>window.load後にヘッダ部分、body部分のそれぞれの列の幅を計算
　　システム上、レコード数が100を超えることが想定されている画面のため、
　　可能な限りDOM操作を最低限にしたいと考えております。

回答を頂きながら、わがままなことを言ってしまい非常に申し訳ありません。
後出しでの情報・要望となってしまい、誠に申し訳ありませんでした。

[yambejp]

よくみたらヘッダ部分とボディ部分が同じテーブルなのですね
この手の処理はヘッダ部分とボディ部分を別のテーブルにするのが普通です

はるか昔、それこそWEBの黎明期からこの話題はでていますが、
ブラウザで一向に解決する気がないようなので
正直言うといまのテーブル構成を使う限りすっきりした解決策はないと思います

[K.T_build]

>>正直言うといまのテーブル構成を使う限りすっきりした解決策はないと思います
　　　そうなのですか、残念です、、、

>>この手の処理はヘッダ部分とボディ部分を別のテーブルにするのが普通です
　　　なるほど、そうなのですね。
　　　試しにヘッダ部分とボディ部分を別のテーブルにしてみましたが、特に変化はありませんでした。
　　　単純な疑問なのですが、別のテーブルにするのは何故なんでしょうか？
　　　　　※どんなメリットがあるのでしょう？