境界線を点滅させずにテーブルのヘッダーと左の列をフリーズする方法

Question

テーブルのデータを処理しています。私はテーブルのヘッダを修正し、jQueryを使用してカラムを左にしました。それはうまく動作しますが、私はテーブルをスクロールしているときに境界がちらついています。適用すると、背景色は白で、境界線は表示されません。テーブルをスクロールしている間、どのように境界のちらつきを止めることができますか？私を助けてください。前もって感謝します。ここで

JSfiddle https: //jsfiddle.net/j41acpmx/65/

Answer 1

問題で私のコードは、相対的な位置にあるとの国境がちらつくすることを残しています。この問題を解決する2つの方法。

最初の方法はCSSを使用していて、テーブルの最初の境界線を最初から削除し、背景を白くして見やすくします。

https://jsfiddle.net/pfysr0be/

第二の方法固定番目の要素を位置決めする際に境界線の幅を減算することです。

現在のボーダーは2pxなので、115行目のCSSのトッププロパティから2pxを引いたものです。これは2ピクセルアップします。

if(settings.head) 
      { 
       this.find("thead tr > *").css("top", parseInt(top)-2); 
       ... 
      } 

Answer 2

また、CSSをこれに変更することもできます。 フローティング時に2ピクセル欠けて解決するために、ボックスインセットシャドウを追加する。

#parent { 
      height: 300px; 
      width: 300px; 
     } 
.table{ 
     border-collapse: collapse; 

     } 
    td{ 
    border-top: 2px solid; 
    background: white; 
    padding: 5px; 
    } 
    th{ 
    background: white; 
    padding: 5px; 
    -webkit-box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 1); 
    -moz-box-shadow: inset 0px 2px 0px 0px rgba(0, 0, 0, 1); 
    box-shadow:   inset 0px 2px 0px 0px rgba(0, 0, 0, 1); 
    } 

Jsfiddleリンク：https://jsfiddle.net/af2quek5/