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

Question

我被要求做一个项目，我创建一个具有交替列背景颜色的表。这一切都很好，除了有几行需要跨越其他列，同时仍然具有“已检查”背景，这是在每个td中确定的。

请参阅the jsfiddle或代码：

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;
}
}

对应的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>

目前我有一个背景图片，我已插入该图像以在跨越列的td中复制此效果。唯一的问题是，无论我如何尝试（取结果的屏幕上限等），这都不能完美排列;我应该注意这是一个固定宽度的表。老实说，除了Opera之外，所有这些都很接近，只是看起来很不错。

有没有办法一直这样做？

Answer 1

这是一个非常棘手的问题。这是out-of-the-box kind of solution，可能适用于您，也可能不适用于您。它涉及colspan3细胞上的线性“梯度”，但需要：

• 列上的给定宽度（在示例代码中以200px存在）
• 实际上可以容纳该宽度的表格（如我的示例中，最小宽度为800px）
• 在渐变中包含单元格的填充，或者删除它们（如我的示例所示）

你的html在colspan-cell上有一个类略有更新：

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

通过使用Gradient Generator：

，CSS增加了这一点

.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 */
}

在现代浏览器中提供类似的东西，包括Opera：