2

テーブルに垂直スクロール バーが接続されている場合にテーブル ヘッダーが移動する理由がわかりません。

これが私のhtmlコードです：

<div  >
        <ul class="nav nav-tabs" id="tab123" style="margin-top: 26px;">
            <li><a href="#div1" data-toggle="tab" >Tab1</a></li>
            <li><a href="#div2" data-toggle="tab"  >Tab2</a></li>

        </ul>

        <div class="tab-content"  style="overflow: hidden; margin-left: 20px; height: 504px;">
            <div  id="div1"  class="tab-pane">


                <div  style="overflow: hidden;margin-top: 10px;"  >

                    <table  style="width: 100%" border = "1">

                        <thead><tr>

                                   <th style="padding: 0px;width: 0px;visibility: hidden"></th>
                                   <th style="padding: 0px;width: 130px;text-align: left">Text1</th>
                                   <th style="padding: 0px;width: 181px;text-align: left">Text2  </th>
                                   <th style="padding: 0px;width: 85px;text-align: left">Text3   </th>
                                   <th style="padding: 0px;width:0.5px "></th>
                                   <th style="padding: 0px;text-align: center;width: 70px">Text5</th>
                               </tr>

                        </thead>

                    </table>

                </div>

                <div  style="overflow: auto;height: 50px;" class="tab-pane">
                    <table id ="tblSysDetails"   style="width: 100%;float: left" border ="1">

                        <tbody >

                            <tr >

                                <td   style="padding: 0px;width: 0px;visibility: hidden"  ></td>
                                <td  style="padding: 0px;width: 130px;text-align: left" >BBB</td>
                                <td  style="padding: 0px;width: 181px;text-align: left" >CCC</td>
                                <td  style="padding: 0px;width: 85px;text-align: left" >DDD</td>
                                <td  style="padding: 0px;width: 0.5px"></td>
                                <td  style="padding: 0px;text-align: center;width: 70px" >XXX</td></tr>

                        </tbody>
                    </table>

                </div>

            </div>

                <table style="width: 95%" id="tblCountSysTableChanges">
                    <tr><td style="font-weight: bold;text-align: right">456 </td></tr>
                </table>

                <div id="div2"  class="tab-pane">
                    <table>
                        <tr>
                            <td>AAAAAAAAA</td>
                        </tr>
                    </table>

                </div>

        </div>
    </div>

これが私のフィドル です.1これは垂直スクロールバーなしです

2. 縦スクロールバー付き です。この 2 番目のフィドルは、列をシフトしています。

誰かが理由とそれを回避する方法を教えてもらえますか?

4

1 に答える 1

2

その理由は、親内にスクロールバーが収まる十分なスペースがないため、他の要素を少し縮小してスペースを空けるためです。

スクロールバーを変更せずにそれを回避する唯一の方法は、このように tbody がホバーされていない限り、スクロールバーを非表示にすることです。これはoverflow:hidden、ホバーされていない限り tbody で使用され、次に変更されますoverflow-y:scroll(このように切り替えられた場合、要素の配置や幅には影響しません)

以下は私が追加した CSS です (ほとんどの場合、外部 CSS ファイルに移動されたインラインのものだけです)。更新された HTML については jsFiddle を参照してください。

th, td {
    padding:0px;
    margin:0px;
    text-align:left;
}
th:nth-child(1), td:nth-child(1) {
    width:0px;
    visibility:hidden;
}
th:nth-child(2), td:nth-child(2) {
    width: 130px;
}
th:nth-child(3), td:nth-child(3) {
    width:181px;
}
th:nth-child(4), td:nth-child(4) {
    width:85px;
}
th:nth-child(5), td:nth-child(5) {
    width:.5px;
}
th:nth-child(6), td:nth-child(6) {
    width:70px;
    text-align:center;
}
tbody {
    overflow:hidden;
}
tbody:hover {
    overflow-y: scroll;
}
thead > tr, tbody{
    display:block;
}

アプローチはこのSO投稿で見つかりました。別のオプションは、カスタムスクロールバーを作成することですが、その質問の一番の答えが言うように、それには少しJavaScriptが必要です

なぜ2つのテーブルを使用したのかよくわかりません...おそらく頭を所定の位置に保つためです...しかし、両方をまとめて、ここで説明されているアプローチ（単純なGoogle検索で見つかりました）を使用して修正しました

そうは言っても、実際に習得する必要がある CSS の基本が他にもいくつかあります。以下はその一部とその理由のリストです。

  1. クラスやその他の一般的なセレクターを使用するインライン CSS よりも時間を節約し、構造化されており、従うのが簡単です
  2. コードを整理しましょう！あなたのjsFiddleを最初に見たとき、間隔が大きくずれていたため、フォローして読むのが難しくなりました。jsFiddle には「TidyUp」ボタンもあります。これを使って！
  3. コードに挿入したときに何をするかを理解する パディングを使用する場合は、パディングが何をするかを理解してください。ID を使用する場合は、その理由を知っておいてください。同じことは、JavaScript または使用している他の言語にも当てはまります。抱えている問題の根本を見つけ、そもそもエラーを回避し、本来の使い方で物事を使用することができます。
  4. 何かを行うためのより良い方法があると思われる場合は、それを探してください。要素のブロックに同じ 5 つのスタイルを記述するのにうんざりしている場合は、5 つのスタイルを 1 行だけで適用できるものがある可能性があります (クラス）。これは一例ですが、原則は何にでも当てはまります。あなたが考えたことがあるなら、おそらく他の誰かもそう思っているでしょう
  5. インライン CSSをできる限り避けるこれは、特に同じ方法でスタイル設定された要素が多数ある場合に、問題を見つけて修正することを困難にします。また、注意しないと多くの問題を引き起こす可能性がある非インライン CSS をオーバーライドします。
  6. ID を繰り返さないでくださいID を 2 回繰り返していることに気づかなかったので、フォーマット エラーを修正するのに約 10 分かかりましたtblCountSysTableChanges。あらゆる種類のエラーを引き起こし、違法なマークアップです

いくつかのことを学び、心に留めておいていただければ幸いです。乾杯！(:

于 2013-10-16T20:36:09.280 に答える