如何为没有背景颜色的表格行着色?

时间:2016-11-02 07:43:06

标签: css css3 syncfusion

是否有任何其他CSS属性可用作' background-color '的替代品。设置< tr>?

的颜色

我使用第三方工具通过JavaScript设置表格元素的颜色。我似乎无法使用CSS覆盖它,即使使用!重要即可。我也无法使用JavaScript代码。

所以我想,通过替代方法设置背景颜色可能会有效。但是我知道没有任何属性可以像背景颜色那样。

任何帮助都会很棒。

PS :我更喜欢基于CSS的解决方案,而不是任何形式的脚本。

2 个答案:

答案 0 :(得分:3)

也许这适合你:

tr {
  background-color: red !important; // we want this to override
}
tr {
  background-image: linear-gradient(to bottom, blue, blue) !important;
}
tr:hover {
  background-image: linear-gradient(to bottom, green, green) !important;
}
<table>
  <tr style="background-color: red !important;">
    <td>Table Content</td>
  </tr>
</table>

答案 1 :(得分:0)

使用非常大的插入box-shadow

&#13;
&#13;
td {
  overflow: hidden;
  /* required */
}
td:hover {
  box-shadow: 0 0 200px green inset;
}
&#13;
<table>
  <tr style="background-color: orange !important;">
    <td>Table Content</td>
    <td>Table Content</td>
    <td>Table Content</td>
  </tr>
  <tr style="background-color: pink !important;">
    <td>Table Content</td>
    <td>Table Content</td>
    <td>Table Content</td>
  </tr>
</table>
&#13;
&#13;
&#13;