Forum Moderators: not2easy

Message Too Old, No Replies

gradient on thead; rowspanned th's

         

Readie

2:14 pm on May 16, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hello everyone,

Consider the following mockup:


<html>
<head>
<style type="text/css">
table {
border-collapse: collapse;
}
thead {
background: -moz-linear-gradient(top, #0066ff 0%, #00ff66 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0066ff), color-stop(100%, #00ff66));
background: -webkit-linear-gradient(top, #0066ff 0%, #00ff66 100%);
background: -o-linear-gradient(top, #0066ff 0%, #00ff66 100%);
background: -ms-linear-gradient(top, #0066ff 0%, #00ff66 100%);
background: linear-gradient(to bottom, #0066ff 0%, #00ff66 100%);
}
th, td {
border: 1px solid #000000;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th rowspan="2">Left</th>
<th>Top</th>
<th rowspan="2">Right</th>
</tr>
<tr>
<th>Bottom</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</tbody>
</table>
</body>
</html>

When viewed in Firefox, this has the effect I expect: The gradient is a smooth transition from the top of the thead to the bottom.

When viewed in IE 11, Chrome, Opera and Safari; the transition is shortened and duplicated on the 2 th's which do not have a rowspan attribute.

I have tried adding [transparent/none] to [background/background-image/background-color] for [tr, th, td] to no effect.

Does anyone have any idea on how to resolve this? Or is Firefox being the non-standard one here?

rainborick

3:24 pm on May 16, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



It certainly looks like Firefox renders tables differently. Obviously, the other browsers are rendering the background image at the "cell" level. And I vaguely remember seeing a similar issue arising in the past where some browsers don't style at the <tr> level. I cruised through the W3C specs, but didn't spot anything about this. On the whole, if you prefer the look as Firefox renders it, I think you're going to have to create the internal structure of your <thead> with <div>s.

Readie

3:20 pm on May 19, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yea, I thought that might be the case.

Oh well, thanks for putting your mind to it :)

Fotiman

5:11 pm on May 19, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Looks like this is an issue that's been around for a long time:
[code.google.com...]

There is a hack workaround that involves setting the thead to display: table-caption (for Chrome, not sure about other browsers) but still requires a lot of other manual sizing to get right.

Readie

10:23 pm on May 20, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Path of least resistance.

2 more classes for split rows - each one being a gradient with 50% of the transition of the thead gradient.

Not the prettiest way to code it, but messing around with divs and changing table display is just asking for a headache.

Idea from a comment on stack overflow, reached from the link you provided Fotiman - thanks for that.