html - Style alternating columns in a table with colspan cells -

html - Style alternating columns in a table with colspan cells -

i've been asked project create table has alternating column background colors. , good, except there few rows need span other columns while still having "checked" background, determined in each td.

please see the jsfiddle, or code:

body { font-family:calibri, trebuchet ms, verdana, tahoma, sans-serif; } table { border:1px solid #444; text-align:center; } th, td { width:200px; padding:2px; } .lg { background-color:#eee; } .dg { background-color:#ddd; } }

corresponding html:

<table> <tr> <th>fruits</th> <td class="lg">peach</td> <td class="dg">blueberry</td> <td class="lg">apple</td> </tr> <tr> <th>chocolate</th> <td class="lg">chocolate-chip</td> <td class="dg">double chocolate</td> <td class="lg">turtle</td> </tr> <tr> <th>peanut butter</td> <td colspan="3">peanut butter swirl , long list of items</td> </tr> <tr> <th>classics</th> <td class="lg">chocolate</td> <td class="dg">vanilla</td> <td class="lg">strawberry</td> </tr> </table>

currently have background image i've inserted replicate effect in td spanning columns. problem doesn't line no matter how seek (taking screen cap of results, etc.); , should note fixed-width table. in honesty, it's pretty dang close in of them except opera, looks way off.

is there way consistently?

this tough problem. here's out-of-the-box kind of solution, may or may not work you. involves linear "gradient" on colspan3 cells, requires:

a given width on columns (which present, @ 200px, in sample code) a table can in fact accommodate width (as in example, min-width of 800px) either include paddings of cells in gradients, or remove them (as in example)

your html updated such class on colspan-cell:

<td class="fullspan" colspan="3">peanut butter swirl , long list of items</td>

and css had added, utilize of gradient generator:

.fullspan { background: #eee; /* old browsers */ background: -moz-linear-gradient(left, #eee 0%, #eee 200px, #ddd 200px, #ddd 400px, #eee 400px); /* ff3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#eee), color-stop(200px,#eee), color-stop(200px,#ddd), color-stop(400px,#ddd), color-stop(400px,#eee)); /* chrome,safari4+ */ background: -webkit-linear-gradient(left, #eee 0%,#eee 200px,#ddd 200px,#ddd 400px,#eee 400px); /* chrome10+,safari5.1+ */ background: -o-linear-gradient(left, #eee 0%,#eee 200px,#ddd 200px,#ddd 400px,#eee 400px); /* opera 11.10+ */ background: -ms-linear-gradient(left, #eee 0%,#eee 200px,#ddd 200px,#ddd 400px,#eee 400px); /* ie10+ */ background: linear-gradient(to right, #eee 0%,#eee 200px,#ddd 200px,#ddd 400px,#eee 400px); /* w3c */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#eee', endcolorstr='#eee',gradienttype=1 ); /* ie6-9 */ }

giving in modern browsers, including opera:

html css table