TD-Hintergrundfarbe, die zum Verschwinden der Ränder führt

Ich habe eine große HTML-Tabelle, die dynamisch erstellt wird. Der Tisch hat eine Standardstruktur, inkl. colgroup, thead und tbody und die folgenden Stile.

Soweit funktioniert alles wie vorgesehen, aber wenn ich den TDs in einer Spalte (siehe unten) die Klasse “bgGrey” hinzufüge, um den Zellen in dieser Spalte eine Hintergrundfarbe zu geben (die nur auf einer Spalte benötigt wird), dann alle Ränder dieser Spalte verschwinden in IE11mit Ausnahme des linken Randes und der :hover::before Stil funktioniert in Chrome nicht mehr (Ausgabe 43).
Ohne die Klasse hinzuzufügen "bgGrey" In beiden Browsern habe ich keine Probleme.

Es scheint, dass die Hintergrundfarbe irgendwie die Grenze überlappt, was dies verursacht.

Mein CSS (relevanter Teil):

#myTable, #myTable tbody, #myTable thead, #myTable tr {
    width: 100%;
}
#myTable, #myTable th, #myTable td {
    border: 1px solid #000;
    border-collapse: collapse;
    margin: 0;
    padding: 4px;
    position: relative;
}
#myTable {
    font-size: 14px;
    table-layout: fixed;
}
#myTable th.editable:hover::before, #myTable td.editable:hover::before {
    border: 1px solid blue;
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
}
#myTable .th1 {
    padding: 2px;
}
#myTable .th2 {
    font-weight: normal;
}

.bgGrey {
    background-color: #e6e6e6;
}

Mein HTML (Beispiel TR):

<tr>
    // ...
    <td class="editable"><div contenteditable="true"></div></td>
    <td class="bgGrey editable txtCenter"><div contenteditable="true"></div></td>
    <td class="editable txtRight"><div contenteditable="true"></div></td>
    // ...
</tr>

Ich bin gerade selbst auf dieses Problem gestoßen, aber die hier vorgestellte Lösung gefiel mir nicht, also habe ich weiter gegoogelt. Ich habe diese Antwort gefunden: https://stackoverflow.com/a/16337203/1156476

Hier fixiert ein einfacher Zusatz zur Tabellenzelle die Grenzen:

table td {
  border: 1px solid #000;
  border-collapse: collapse;
  margin: 0;
  padding: 4px;
  position: relative;
  background-clip: padding-box; /* Add this line */
}

Überprüfen Sie die Browserunterstützung unter Kann ich benutzen

Und eine Erklärung der Eigenschaft finden Sie unter Standardista

Bitte entfernen border-collapse: collapse; von #myTable td, wodurch die Grenze verschwindet. Vermeiden Sie es, das zu geben td.

Fügen Sie stattdessen Folgendes hinzu:

#myTable, #myTable th, #myTable td {
    border: 1px solid #000;
    border-collapse: collapse;
    margin: 0;
    padding: 4px;
    position: relative; //REMOVE THIS
}

Können Sie bitte auch versuchen, “position:relative” aus dem CSS zu entfernen?