トランスフォーム翻訳を適用すると、tdの枠線が消える

Question

固定ヘッダーと固定第1列のテーブルを作成しています。

スクロールイベントでtransform translateX/Yを適用すると、ヘッダーと列が固定されたままになります。

ページが読み込まれると、罫線は一番上の行に表示されますが、少しスクロールすると消えます。

ボーダーが消えないようにするにはどのようなCSSが必要ですか？

ソース付きのプランジャはhereです。

Answer 1

私は同様の状況で出て来て、border-collapse: separate;border-spacing: 0px;をこれを修正しました。

border-collapse：separate; - ：これは、表のセルの境界線を設定します。境界線が折りたたまれている場合は折りたたみます。セルは境界線を共有します。

翻訳すると、境界線を共有するセルだけが移動し、問題が発生します。

table.scroll { 
    table-layout: fixed; 
    border-spacing: 0px; 
    border: 1px solid #333; 
    border-collapse: separate; 
} 

document.getElementById("table-container").addEventListener("scroll", function() { 
 
    var translate = "translate(0," + this.scrollTop + "px)"; 
 
    this.querySelector("thead").style.transform = translate; 
 

 
});

thead, tr, th, td, tbody{ 
 
\t border: 1px solid; 
 
\t text-align: center; 
 
\t padding: 3px; 
 
\t 
 
} 
 
table.scroll { 
 
    table-layout: fixed; 
 
    border-spacing: 0px; 
 
    border-collapse: separate; 
 
} 
 
th{ 
 
\t background-color:#99ccff; 
 
\t height: 40px; 
 
\t font-size: 20px; 
 

 
} 
 

 
tr{ 
 
\t width: 500%; 
 
\t height: 20px; 
 
\t font-size: 17px; 
 
} 
 

 
tr:nth-child(even) { 
 
\t background-color: #CCFFFF; 
 
} 
 
tr:nth-child(odd) { 
 
\t background-color: #fae8d1; 
 
} 
 

 
#table-container{ 
 
\t float:left; 
 
\t height: 200px; 
 
\t border: 2px solid; 
 
\t overflow: auto; 
 
}

<div id="table-container"> 
 
\t <table class="scroll"> 
 
\t \t <thead> 
 
\t \t \t <tr> 
 
\t \t \t \t <th class="col-md-2">Name</th> 
 
\t \t \t \t <th class="col-md-2">Birthday</th> 
 
\t \t \t \t <th class="col-md-2">Gender</th> 
 
\t \t \t \t <th class="col-md-2">Marital</th> 
 
\t \t \t \t <th class="col-md-2">Address</th> 
 
\t \t \t \t <th class="col-md-2">Telephone</th> 
 
\t \t \t \t <th class="col-md-2">Email</th> 
 
\t \t \t </tr> 
 
\t \t </thead> 
 
\t \t <tbody> 
 
\t \t \t <tr> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t </tr> 
 
     <tr> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t </tr> 
 
     <tr> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t </tr> 
 
     <tr> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t </tr> 
 
     <tr> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t </tr> 
 
     <tr> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t </tr> 
 
     <tr> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t \t <td>Some Data</td> 
 
\t \t \t </tr> 
 
\t \t </tbody> 
 
\t </table> 
 
</div>

これは

を役に立てば幸い