TBODY background-image wird auch auf alle TD-Elemente falsch angewendet, wie kann man das beheben?

Question

Ein in CSS deklariertes TBODY-Hintergrundbild wird auf alle TD-Elemente im TBODY angewendet, von denen erwartet wird, dass sie nur auf den TBODY angewendet werden.

Um zu reproduzieren: Erstellen Sie eine Tabelle mit mehreren tbody jede enthält einige Zeilen und Zellen. Deklarieren Sie ein TBODY-Hintergrundbild mit CSS. Das erwartete Ergebnis ist, dass der TBODY ein einzelnes Bild als Hintergrund anzeigen soll. In Chrome, Safari, Opera sehen Sie jedoch, dass das Hintergrundbild wiederholt für jeden TD im TBODY ist (getestet auf Mac, neueste Browserversionen ab diesem Post-Datum). Es rendert wie erwartet in FireFox auf Mac und OK auf Edge auf Win10.

Im Beispielcode erwarte ich, dass das Backgroung-Bild (ein 6px breiter schwarzer Balken) im 1,2 und 4 TBODY angezeigt wird und nicht im 3rd. Dies passiert, aber sehen Sie, dass das schwarze Balken-Hintergrundbild auch auf die TD-Elemente angewendet wird, was nicht gut ist. Dies ist kein erwartetes Verhalten, da ich das Hintergrundbild auf der linken Seite des TBODY-Containerelements haben möchte.

Gibt es einen Workaround dafür? Das TBODY ist das Element, das ich nutzen möchte, da dies eine einzelne Deklaration für ein definiertes Hintergrundbild ermöglicht, um alle Zeilen in dem tBody zu überspannen, macht es nett und logisch.

Dies scheint ein Chromium bug zu sein: https://bugs.chromium.org/p/chromium/issues/detail?id=35697

JSFiddle: https://jsfiddle.net/acyeheq6/

table { 
 
    border-collapse: separate; 
 
    border-spacing: 0; 
 
    width: 100%; 
 
} 
 
tbody.tb1 { background-color: lightblue; } 
 
tbody.tb2 { background-color: lightgray; } 
 
tbody td { padding-left: 15px; } 
 
tbody.item { 
 
    background-repeat: no-repeat; 
 
    background-image: url(http://dummyimage.com/6x80/000/fff.png); 
 
    background-position: left top; 
 
}

<table> \t 
 
    <tbody class="item tb1"> 
 
    <tr> 
 
     <td>6/22/16</td> 
 
     <td>Lorem Ipsum</td> 
 
     <td>Temporibus autem</td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="3">Itaque earum rerum hic tenetur</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody class="item tb2"> 
 
    <tr> 
 
     <td>6/19/16</td> 
 
     <td>Lorem Ipsum</td> 
 
     <td>Temporibus autem</td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="3">Finibus Bonorum et Malorum</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody class="tb1"> 
 
    <tr> 
 
     <td>6/18/16</td> 
 
     <td>Expedita distinctio</td> 
 
     <td>Deserunt mollitia</td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="3">Doloribus asperiores repellat.</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody class="item tb2"> 
 
    <tr> 
 
     <td>6/17/16</td> 
 
     <td>Lorem Ipsum</td> 
 
     <td>Temporibus autem</td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="3">similique sunt in culpa qui officia</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

Es ist ein Fehler von background-image in <tbody> in Chrome.
Also, ich denke, Sie können Ihre Methode ändern, um das Ziel zu erreichen.

Wie Sie beschrieben: in der 1,2 und 4. TBODY angezeigt werden und nicht der 3.

Im Beispielcode ich das backgroung Bild (a 6px breite schwarze Balken) erwarten.

Und:

FireFox auf Mac und OK auf Edge auf Win10

Nicht Hintergrundbild in <tbody> hinzufügen, fügen Sie einfach in die ersten <td> Elemente jeder Reihe.

Lösung: Ändern CSS-Selektor tbody.item in tbody.item > tr > td:first-child