Błąd przeglądarki Google Chrome z tłem tr

Question

Próbuję ustawić obraz tła dla wiersza tabeli, ale tło jest stosowane do wszystkich jego td potomków.

W IE7 nie jest taki sam błąd, ale jest to rozwiązanie z

tr { 
    position: relative; 
} 

Każda podpowiedź o tym?

Dziękujemy

Answer 1

Jest to jedyne znane mi rozwiązanie bez JavaScript. Ma wady, określając wysokość TR i TD, ponieważ TR jest pozycją absolutną. Nie wiem też, jak będzie się zachowywać w innych przeglądarkach.

<style> 
    tr { 
     position: absolute; 
     background: url(http://www.google.com/intl/en_ALL/images/logo.gif) no-repeat; 
     height: 200px; 
     border: 1px solid #00f; 
    } 
    td { 
     width: 200px; 
     height: 200px; 
     border: 1px solid #f00; 
    } 
</style> 

<table cellpadding="0" cellspacing="0"> 
    <tr> 
     <td></td> 
     <td></td> 
    </tr> 
</table> 

Answer 2

Działa to dla mnie we wszystkich przeglądarkach:

tr { 
background: transparent url(/shadow-down.gif) no-repeat 0% 100%; 
display: block; 
position: relative; 
width: 828px; 
} 

tr td{ 
background: transparent; 
} 

Answer 3

Chrome (WebKit) zastępuje position: relative dla wierszy tabeli i oblicza styl statyczny. Błąd lub funkcja - zapobiega to pozycji: względna poprawka, która jest używana w IE7.

roztwór przy użyciu środków (znane) rozmiary komórek: tr { pływak: po; }

I dodaj odpowiednie rozmiary komórek do wszystkich komórek w tabeli (za pomocą stylów klasycznych lub wbudowanych). Dodałem także rozmiary rzędów, ale może nie być konieczne, aby rozwiązanie działało.

Nie potrzebuję rozwiązania dla dynamicznych rozmiarów komórek, więc nie odkryłem tego zastosowania.

Answer 4

Polecam, aby ustawić obraz tła dla komórek tabeli bezpośrednio, przesuwając położenie tła wszystkich kolejnych komórek w lewo, aby wyglądał tak, jak powinien. W ten sposób nie trzeba kroić obrazu tła.

Answer 5

W tagu stylu tr obejmują Style='Display:inline-table;' Działa dobrze we wszystkich przeglądarkach.

Answer 6

Co skończyło się robi było:

table.money-list tr { 
background: url(images/status-2.gif) no-repeat; 
} 
@media screen and (-webkit-min-device-pixel-ratio:0) { 

    /*Chrome CSS here*/ 
    table tbody tr td:first-child { 
    background-image: none; 
    background-color: transparent; 
} 

table tr td{ 
    background-color: #FFFFFF; 
} 
} 

Więc jak widać, wystarczy ustawić kolor tła dla każdego TD ale pierwszy i docelowej Webkit.

Answer 7

Oto moje rozwiązanie jQuery. To jest dla thead tr, ale powinno działać również dla tbody tr.

$(document).ready(function() { 
    // Apply <thead><tr> background row fix for Chrome/Safari (webkit) 
    if ($.browser.webkit) { 
     $('thead tr').each(function (i) { 
      var theadWidth = $(this).width()-1; 
      $(this).append('<div style="position:absolute;top:'+$(this).position().top+'px;left:'+$(this).position().left+'px;z-index:0;width:'+theadWidth+'px;height:'+($(this).height()+8)+'px;background:#2e4b83 url(th_background.jpg) no-repeat 0 0;background-size:'+theadWidth+'px 100%;"></div>'); 
     }); 
    } 
}); 

Możesz to sprawdzić w Chrome/Firefox/IE9. Powinien wyglądać tak samo.

Answer 8

Żadne z omawianych obejść nie działało dla mnie całkiem poprawnie. Oto, co skończyło się z:

TABLE TBODY.highlight { 
    background-image: url(path/image.png); 
} 

TABLE>* { 
    float: left; 
    clear: both; 
} 

tylko przetestowane w Chrome i Firefox więc nie wiem jak to działa w IE (nie ważne w moim przypadku), ale dla mnie to działa bez zarzutu!