我想更改每行的 HTML 表格的背景颜色，但在智能手机上它会针对每个单元格进行更改

Question

当我编写下面的代码时，它在PC上以开发者模式（智能手机模拟）正常显示，但当我在实际设备上检查它时，设计崩溃了。

・HTML

<table>
  <tr>
    <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
  <tr>
    <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
  <tr>
    <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
  <tr>
    <th>見出し</th>
    <td>データ</td>
    <td>データ</td>
    <td>データ</td>
  </tr>
</table>

・CSS

table{
  width: 100%;
  border-collapse: collapse;
}

table tr{
  background-image: linear-gradient(40deg, #fce043 0%, #fb7ba2 74%);
}

table tr:last-child *{
  border-bottom: none;
}

table th,table td{
  text-align: center;
  border: solid 2px #fff;
  color: white;
  padding: 10px 0;
}

・显示结果 - PC 开发者模式（智能手机模拟）

・显示结果 - 实际智能手机

我想反映每行的背景颜色设置，但它会反映到每个单元格。 （我想在实际的智能手机上反映与PC开发者模式（智能手机模拟）相同的显示结果。）

请让我知道如何解决这个问题。

Answer 1

添加Webkit属性，这将允许你的CSS适用于不同的浏览器

background: -o-linear-gradient();
background: -webkit-gradient(); /* Older webkit syntax */
background: -webkit-linear-gradient();
background: -ms-linear-gradient();