< tr>的对角CSS渐变在Chrome中 [英] Diagonal CSS gradient for <tr> in Chrome

问题描述

我想使用对角线渐变作为表格行的背景.它在Firefox中可以正常工作，但在Chrome中，渐变适用于每个单独的<td>.有什么方法或一些解决方法可以使其正常工作?

I'd like to have a diagonal gradient as the background for table rows. It works fine in Firefox, but in Chrome the gradient is applied to each individual <td>. Is there a way or some workaround to get it to work?

这里是一个小提琴来演示.

这是两者之间的区别.

推荐答案

前段时间，我遇到了同样的问题...我发现的唯一解决方案是将tr设置为display:block.尽管可以引起一些布局问题，但是它可以工作...

I ran into this same issue some time ago... Only solution I found was to make the tr a display:block. It works, though it can cause some layout issues...

http://jsfiddle.net/p3s3zLja/4/

tr {
    color: white;
    background: linear-gradient(to bottom right, blue, red);
    position: relative;
    display: block;
}

这篇关于< tr>的对角CSS渐变在Chrome中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！