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

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

ただいまの
回答率

88.59%

fixed_midashiのヘッダがずれる

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 3,997

Matt

score 29

fixed_midashiのdivモードでテーブルの見出しを固定できるのですが、スクロールしたときに見出しがずれてしまいます。

イメージ説明

スクロール後
イメージ説明

ブラウザはFirefoxです。
SkyBlue CSSフレームワークを使ったHTML上に設置しているのですが、これが原因なのでしょうか。どのようにすれば、見出しのずれをなくせますでしょうか?

<div id="div1" class="scroll_div" style="overflow:auto; width: 300px; height: 160px;">
  <table border="1" _fixedhead="cols:2;"> <!-- ★ -->
    <tr>
      <th>&nbsp;</th><th nowrap>NAME</th>
      <th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th><th>G</th>
      <th>H</th><th>I</th><th>J</th><th>.</th><th>X</th><th>Y</th><th>Z</th>
    </tr>
    <tr>
      <td class="num">1</td><td>Name1</td>
      <td>A0001</td><td>B0001</td><td>C0001</td><td>D0001</td><td>E0001</td><td>F0001</td><td>G0001</td>
      <td>H0001</td><td>I0001</td><td>J0001</td><td> ... </td><td>X0001</td><td>Y0001</td><td>Z0001</td>
    </tr>
    <tr>
      <td class="num">2</td><td>Name2</td>
      <td>A0002</td><td>B0002</td><td>C0002</td><td>D0002</td><td>E0002</td><td>F0002</td><td>G0002</td>
      <td>H0002</td><td>I0002</td><td>J0002</td><td> ... </td><td>X0002</td><td>Y0002</td><td>Z0002</td>
    </tr>
    <tr>
      <td class="num">3</td><td>Name3</td>
      <td>A0003</td><td>B0003</td><td>C0003</td><td>D0003</td><td>E0003</td><td>F0003</td><td>G0003</td>
      <td>H0003</td><td>I0003</td><td>J0003</td><td> ... </td><td>X0003</td><td>Y0003</td><td>Z0003</td>
    </tr>
    <tr>
      <td class="num">4</td><td>Name4</td>
      <td>A0004</td><td>B0004</td><td>C0004</td><td>D0004</td><td>E0004</td><td>F0004</td><td>G0004</td>
      <td>H0004</td><td>I0004</td><td>J0004</td><td> ... </td><td>X0004</td><td>Y0004</td><td>Z0004</td>
    </tr>
    <tr>
      <td class="num">5</td><td>Name5</td>
      <td>A0005</td><td>B0005</td><td>C0005</td><td>D0005</td><td>E0005</td><td>F0005</td><td>G0005</td>
      <td>H0005</td><td>I0005</td><td>J0005</td><td> ... </td><td>X0005</td><td>Y0005</td><td>Z0005</td>
    </tr>
    <tr>
      <td class="num">6</td><td>Name6</td>
      <td>A0006</td><td>B0006</td><td>C0006</td><td>D0006</td><td>E0006</td><td>F0006</td><td>G0006</td>
      <td>H0006</td><td>I0006</td><td>J0006</td><td> ... </td><td>X0006</td><td>Y0006</td><td>Z0006</td>
    </tr>
    <tr>
      <td class="num">7</td><td>Name7</td>
      <td>A0007</td><td>B0007</td><td>C0007</td><td>D0007</td><td>E0007</td><td>F0007</td><td>G0007</td>
      <td>H0007</td><td>I0007</td><td>J0007</td><td> ... </td><td>X0007</td><td>Y0007</td><td>Z0007</td>
    </tr>
    <tr>
      <td class="num">8</td><td>Name8</td>
      <td>A0008</td><td>B0008</td><td>C0008</td><td>D0008</td><td>E0008</td><td>F0008</td><td>G0008</td>
      <td>H0008</td><td>I0008</td><td>J0008</td><td> ... </td><td>X0008</td><td>Y0008</td><td>Z0008</td>
    </tr>
    <tr>
      <td class="num">9</td><td>Name9</td>
      <td>A0009</td><td>B0009</td><td>C0009</td><td>D0009</td><td>E0009</td><td>F0009</td><td>G0009</td>
      <td>H0009</td><td>I0009</td><td>J0009</td><td> ... </td><td>X0009</td><td>Y0009</td><td>Z0009</td>
    </tr>
  </table>
</div>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • Matt

    2018/11/20 14:34

    フレームワークのCSSが優先されているかと思いますが,この優先度はどのようにすれば変えることができるのでしょうか

    キャンセル

  • m.ts10806

    2018/11/20 14:36

    何が影響しているか見ないと確実なことは言えません。ブラウザ開発ツールからスタイル確認をして影響している指定を探して潰していく形になるかなと

    キャンセル

  • Matt

    2018/11/20 15:49

    わかりました.ブラウザ開発ツールで確認してみます.

    キャンセル

回答 1

check解決した方法

0

tableタグをtable-layout:fixedを指定して,ヘッダーを固定することで,CSSフレームワークを使ったまま大きなずれを解消することができました.(fixed_midashiのページに指摘されているとおり,1pxほどのずれあり)
ご協力いただいた皆様ありがとうございました.

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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