質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.98%

  • PHP

    17812questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • CSS

    4825questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    3400questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 171

K.T_build

score 20

テーブルでヘッダーを固定して、ボディのみスクロールさせたいです。
その際にヘッダーとボディ部に 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を指定するのはスマートな感じがしないため、よりよい方法があればご教授いただければ幸いです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/10 17:05 編集

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

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

    キャンセル

  • 2017/11/10 17:13

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

    キャンセル

+2

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/10 15:44

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

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

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

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

    キャンセル

  • 2017/11/10 15:50

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

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

    キャンセル

  • 2017/11/10 16:01

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

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.98%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    17812questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • CSS

    4825questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • HTML5

    3400questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。