Tabelle Grenzen nicht richtig gemacht wird, wenn td Position: relative

Question

Ich habe Probleme mit Tabellenrahmen, die nicht immer richtig zu machen, wenn folgende Bedingungen erfüllt sind:

• Die Tabelle in einem div mit overflow-y:scroll enthalten ist
• Borders auf dem Tisch zusammengebrochen sind
• Elemente position:relative

gestylt so nahe, wie ich sagen kann, dies geschieht nur auf Chrom (Versi unter 54.0.2840.98 unter Mac OS 10.11.6). Ich habe auf Safari und Firefox ohne Probleme getestet.

Ich habe einen minimalen Fall in JSFiddle (https://jsfiddle.net/5a0a4sL1/24/) verwaltet. Der Code sieht wie folgt aus:

.scroll { 
 
    background-color:white; 
 
    overflow-y: scroll; 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 
.wrapper { 
 
    height: auto; 
 
    width: 280px; 
 
    padding: 10px; 
 
    margin: 0px; 
 
} 
 
table { 
 
    width:90%; 
 
    margin:0px 5%; 
 
    border-collapse:collapse; 
 
} 
 
td { 
 
    position:relative; 
 
    border:1px solid black; 
 
}

<div class="scroll"> 
 
    <div class="wrapper"> 
 
    <table> 
 
     <tbody> 
 
     <tr><td style="height:39px;"></td></tr> 
 
     <tr><td style="height:75px;"></td></tr> 
 
     <tr><td style="height:111px;"></td></tr> 
 
     <tr><td style="height:39px;"></td></tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>

Die Seite sieht wie folgt aus, wenn es ein Problem ist:

Hier werden die Grenzen für die untere Reihe-and-a- Bit der Tabelle kann nicht gerendert werden, obwohl Tabelleninhalte anzeigen würden, wenn es welche gäbe. Die Präsenz und der Schweregrad des Problems hängen von der Größe des Chrome-Fensters ab, was mich zu der Annahme verleitet, dass dies ein Fehler im Browser ist.

Meine Frage ist diese: Gibt es irgendetwas im Code, der aussieht, als ob ich offensichtlich den Browser missbrauche? Irgendwelche Optimierungen, die die gleiche Aufgabe erfüllen könnten (die Position: relativ ist für die Platzierung von Griffen zur Größenänderung erforderlich), ohne dass Chrome verärgert wird? Oder ist das nur ein klarer Browser-Bug?

Bearbeiten: Ich glaube, das ist nicht die "Tabelle Grenzen verschwinden mit Position: relative" Problem here, for example diskutiert. Umrandungen für Tabellenzellen werden oft teilweise gerendert, und das Problem verschwindet, wenn (zum Beispiel) das Scrollen in der y-Richtung entfernt wird.

Answer 1

Ich replizierte das Problem. Das Rendering ist in jedem Browser anders. Es könnte ein Browser Bug sein.

Eine einfache Problemumgehung, damit es in allen Browsern einwandfrei funktioniert, wäre <div> in jedem td hinzuzufügen und mit position: relative zu formatieren. Und wenn Sie wollen, dass die div die gleiche Höhe wie die td nehmen, dann geben Sie ihnen auch height: 100%.

Hier ist ein demo.

Off-Topic Hinweis (Art relavant, um die Ursache des Problems):

Wenn Sie Polsterung 10px auf ein Element mit einer Breite 300px geben, wird die tatsächliche Breite 320px. Und wenn Sie es Rand 1px geben, wird die tatsächliche Breite 322px sein (Rand links 1px und Rand rechts 1px). Um ein tatsächliches 300px mit Padding 10px und border 1px zu erhalten, geben Sie dem Element dieses Attribut: box-sizing: border-box;. Das gleiche Konzept gilt für "Höhe".

Zum Beispiel, als Sie eine Elementhöhe 39px und Rand 1px gaben, ist die tatsächliche Höhe 41px (1px oberen Rand + 1px unteren Rand). Wenn Sie box-sizing: border-box zu td hinzufügen, wäre die Höhe 39px.