CSS/Webkit: фоновые изображения для таблицы строк

Question

По какой-то причине, когда вы применяете фоновое изображение к tr в Safari/Chrome, оно отображает его так, как если бы это правило применялось к каждому td.

Firefox:

Firefox http://www.whyprime.com/temp/table-firefox.png

Safari:

Safari http://www.whyprime.com/temp/table-safari.png

Я нашел эту статью обсуждали исправление:

http://snook.ca/archives/html_and_css/applying_a_back

Мне удалось заставить его работать в IE с разделителями gif, но не могу понять это для Safari.

http://www.whyprime.com/temp/table-background.html

Answer 1

Будет ли ваша таблица всегда только 2 строки? Такие, как:

<table> 
    <tr> 
    <td></td> 
    <td></td> 
    </tr> 
</table> 

Если да, то простое, но не слишком элегантное решение было бы разделить фоновое изображение на два изображения, и применить класс CSS к левой и правой колонке, применяя половину стрелки на правая сторона в левой колонке, а на левую сторону правой колонки:

<table> 
    <tr> 
    <td class="left"></td> 
    <td class="right"></td> 
    </tr> 
</table> 

вашего CSS может затем быть похож на:

td.left 
{ 
    background: #ffffff url(../PathToLeftBackground.png) top right; 
} 
td.right 
{ 
    background: #fffff url(../PathToRightBackground.png) top left; 
} 

Вы можете также использовать спрайт изображение, где используйте 1 изображение и поместите его по-разному для двух фонов.

Я понимаю, что это, вероятно, не самое идеальное решение, но, по крайней мере, устранить проблему и заставить ваш проект двигаться. Я иногда использую простые решения, такие как это, чтобы продвигаться вперед, а затем пересмотреть проблему, чтобы сделать ее более эффективной позже.

Надеюсь, это поможет!

Answer 2

По умолчанию TR и TD имеют свойства отображения table-cell и table-row. Нам нужно, чтобы они забыли об этом и почувствовали себя как простые элементы блока:

tr {display: block;} 
td {display: inline-block; background: transparent;} 

Этот код решил проблему рендеринга для меня.

Answer 3

немного поздно, но вы можете использовать «привязанность к фону: исправлено», чтобы решить эту проблему.

<table> 
    <tr class="bg"> 
    <td></td> 
    <td></td> 
    </tr> 
</table> 

и CSS

tr.bg { 
    background-image : url(../PathToLeftBackground.png) repeat-y 50px 0px; 
    background-attachment: fixed; 
} 

и это работает!