用colspan细胞在表格中交替列样式

Question

I've been asked to do a project where I create a table which has alternating column background colors. This is all well and good, except there are a few rows which need to span the other columns while still having the "checked" background, that is determined in each td.

Please see the jsfiddle , or the 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 and a 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 I have a background image which I've inserted to replicate this effect in the td which is spanning the columns. The only problem is this doesn't line up perfectly no matter how I try (taking a screen cap of the results, etc.); and I should note this is a fixed-width table. In all honesty, it's pretty dang close in all of them except Opera, which just looks way off.

Is there any way to do this consistently?

Answer 1

This is a really tough problem. Here's an out-of-the-box kind of solution , that may or may not work for you . It involves a linear "gradient" on the colspan3 cells, but requires:

• A given width on columns (which was present, at 200px, in your sample code)
• A table that can in fact accommodate that width (as in my example, with a min-width of 800px)
• Either include the paddings of cells in the gradients, or remove them (as in my example)

Your html was slightly updated as such with a class on the colspan-cell:

<td class="fullspan" colspan="3">Peanut Butter Swirl and a long list of items</td>

And the CSS had this added, with the use of the 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 something like this in modern browsers, including Opera: