td Grenze verschwindet beim Anwenden der Transformation übersetzen

Question

Ich baue eine Tabelle mit einem festen Header und einer festen ersten Spalte.

Der Header und die Spalte bleiben durch Anwendung der Transformation translateX/Y beim Scroll-Ereignis unverändert.

Wenn die Seite geladen wird, sind die Rahmen in der oberen Reihe sichtbar, aber sobald Sie ein wenig nach unten scrollen, verschwinden sie.

Welches CSS brauche ich, damit der Rand nicht verschwindet?

Ein Plünderer mit der Quelle kann here gefunden werden.

Answer 1

Ich stieß auf ähnliche Situation und border-collapse: separate;border-spacing: 0px; zu Tabelle hinzugefügt dies behoben.

border-collapse: getrennt; -: Dies setzt einen separaten Rand für Tabellenzellen und wenn sein Rand-Kollaps: Kollaps; dann teilen Zellen ihre Grenze.

Wenn wir übersetzen, bewegen sich nur die Zellen, die ihre Grenze teilen und das Problem verursachen.

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>

this helps