1

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

请参阅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 之外，所有这些都非常接近，它看起来很遥远。

有没有办法始终如一地做到这一点？

4

1 回答 1

3

这是一个非常棘手的问题。这是一种开箱即用的解决方案，它可能适合您，也可能不适合您。它涉及 colspan3 单元格上的线性“梯度”，但需要：

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

您的 html 使用 colspan-cell 上的一个类进行了轻微更新：

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

CSS 使用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 */
}

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

渐变黑客渲染

于 2013-02-19T22:21:58.833 回答