Блог

Когда я использую градиентный фон в теге tr, он, кажется, нормально работает в других браузерах, но кажется, что фоновый код применяется к каждому тегу td в Safari. Вы поймете, что я имею в виду, когда запустите приведенный ниже пример кода как в Safari, так и в другом браузере. У кого-нибудь есть предложение по решению этой проблемы?

Хром:

Сафари:

 table {
  border-collapse: collapse;
}

tr {
  background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 50%);
}

td {
  border: 1px solid grey;
} 

 <table>
  <tr>
    <td>AAAAA</td>
    <td>BBBBB</td>
    <td>CCCCC</td>
  </tr>
  <tr>
    <td>AAAAA</td>
    <td>BBBBB</td>
    <td>CCCCC</td>
  </tr>
</table> 

В Safari (а также в Chrome на IOS) фоновое изображение, по-видимому, применяется к каждому элементу td, а не к содержащему их tr.

Добавление display: block; к элементу tr дает правильный результат. Однако я не знаю, нарушит ли это что-либо еще в компоновке таблицы, поэтому это необходимо будет проверить в любом конкретном случае.

Вот фрагмент. Протестировано в Safari и Chrome на iPad 14 и Chrome, Firefox и Edge на Windows 10. Дает неверный результат в IE11 на Windows10.

 table {
  border-collapse: collapse;
}

tr {
  display: block;
  background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 50%);
}

td {
  border: 1px solid grey;
} 

 <table>
  <tr>
    <td>AAAAA</td>
    <td>BBBBB</td>
    <td>CCCCC</td>
  </tr>
  <tr>
    <td>AAAAA</td>
    <td>BBBBB</td>
    <td>CCCCC</td>
  </tr>
</table> 

Попробуйте установить фон для таблицы, но не tr. Удалить атрибут фона tr

 table{
background: linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 50%);
}