Question

I have a table in a webview that I use in an android app.

The problem is that "background-image:-webkit-gradient(linear, left top, left bottom, from(#3F3F3F), to(#202020));" causes a white line in between the <td>s of that table. Border-collapse or border:none only works without the gradient.

The lines does not appear on all android devices (appears on Galaxy S2, zte blade for example) and does not appear in chrome or iphone. Result is the same without just background:-webkit… but with black lines instead.

Any suggestions?

css:

.sporttable tr:nth-child(1)
{
    background-image:-webkit-gradient(linear, left top, left bottom, from(#3F3F3F), to(#202020));
    background-size: auto;
    color: #fff;
    font-weight: bold;
}

Answer 1

I solved this using a gradient background image behind the css, this will make the lines almost non visible on the effected devices. Advantages against just using an image background is that the css scales much better and the gradient is much smoother. Far from a perfect solution, but it works.