Css 渐变将单元格放入表格中

我必须做一个类似甘特图的东西。这是我已经完成的：

在这个案例中，我正在处理表格。正如你在图片中看到的，我在第一、第二和最后一行有一个渐变。我必须为所有的绿色细胞做这件事。 正如您在最后一行中所看到的，虽然有渐变，但分隔每列的白线消失了，因为我设置了colspan=11。这是我发现的唯一一种制造类似东西的方法

这里有一些代码

HTML

---

任何人都有保持白线和渐变的窍门吗？

我能想到的唯一的东西都是丑陋的：

• 在顶部覆盖另一张桌子以显示边框
• 覆盖一个将有背景的div，但给它一些透明度，以便显示边框
• 在单元格之间分割背景（或没有渐变）

---

您应该将

拆分为11个单独的元素，并在CSS中使用

背景大小

和

背景位置

，使渐变看起来像跨越了11个元素

小提琴示例：

您的HTML代码可能如下所示：

<tr>
   <td class="days">&nbsp;</td>
   <td class="days">&nbsp;</td>
   <td class="days">&nbsp;</td>
   <td class="days selected colspan-11 col-1">&nbsp;</td>
   <td class="days selected colspan-11 col-2">&nbsp;</td>
   <td class="days selected colspan-11 col-3">&nbsp;</td>
   <td class="days selected colspan-11 col-4">&nbsp;</td>
   <td class="days selected colspan-11 col-5">&nbsp;</td>
   <td class="days selected colspan-11 col-6">&nbsp;</td>
   <td class="days selected colspan-11 col-7">&nbsp;</td>
   <td class="days selected colspan-11 col-8">&nbsp;</td>
   <td class="days selected colspan-11 col-9">&nbsp;</td>
   <td class="days selected colspan-11 col-10">&nbsp;</td>
   <td class="days selected colspan-11 col-11">&nbsp;</td>
</tr>

然后你需要在每个元素的右边放置背景渐变，使它看起来像一个大渐变。对于

n

第n个元素，我们需要向左移动渐变

n*（宽度+边框宽度）

。这是使用以下代码完成的：

td.colspan-11.col-1 {
    background-position: 0 0;
}

td.colspan-11.col-2 {
    background-position: -32px 0;
}

td.colspan-11.col-3 {
    background-position: -64px 0;
}

/* etc. */

---

查看我的小提琴，了解完整的代码和一个工作示例。

在

中不能有

，嘿@paulslater19。当我在研究实现它的方法时，我发现。谢谢。不过我想那是克里斯的错误。如果不是（但确实是），你不想删除你的

colspan=11

并有多个列吗？@paulslater19：这确实是一个错误。@paulslater19是的，我可以删除并保留一个colspan，它也会起作用。你可以把链接放在小提琴上吗？？Thanks@user794035答案现在已经完成，包括一个链接。谢谢。它在ff和chrome中运行良好。在IE9中不起作用。但是没关系。谢谢lot@user794035很高兴听到！你有没有看一下我在小提琴里提到的CSS代码？它可以选择生成SVG文件以支持IE9。也许你能让它工作起来？谢谢你的提示。我试试看。我比第一个更乐观

<tr>
   <td class="days">&nbsp;</td>
   <td class="days">&nbsp;</td>
   <td class="days">&nbsp;</td>
   <td class="days selected colspan-11 col-1">&nbsp;</td>
   <td class="days selected colspan-11 col-2">&nbsp;</td>
   <td class="days selected colspan-11 col-3">&nbsp;</td>
   <td class="days selected colspan-11 col-4">&nbsp;</td>
   <td class="days selected colspan-11 col-5">&nbsp;</td>
   <td class="days selected colspan-11 col-6">&nbsp;</td>
   <td class="days selected colspan-11 col-7">&nbsp;</td>
   <td class="days selected colspan-11 col-8">&nbsp;</td>
   <td class="days selected colspan-11 col-9">&nbsp;</td>
   <td class="days selected colspan-11 col-10">&nbsp;</td>
   <td class="days selected colspan-11 col-11">&nbsp;</td>
</tr>

td.colspan-11 {
    background-size: 350px 1px;
}

td.colspan-11.col-1 {
    background-position: 0 0;
}

td.colspan-11.col-2 {
    background-position: -32px 0;
}

td.colspan-11.col-3 {
    background-position: -64px 0;
}

/* etc. */