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

Question

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

Firefox:

_{(источник: whyprime.com )}

Safari:

_{(источник: whyprime.com )}

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

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

Мне удалось заставить его работать в IE с помощью проставочных картинок, но я не могу понять это для Safari.

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

Answer 1

уже поздно, но Вы можете использовать «background-attachment: fixed» для решения этой проблемы.

<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;
}

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

Answer 2

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

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

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

Answer 3

Будет ли в вашей таблице всегда только 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 изображение и располагать его по-разному для двух фонов.

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

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