1

我必须制作一个类似甘特图的东西。这是我已经完成的：http ://tinypic.com/view.php?pic=160ecxu&s=6 。

对于这种情况，我正在使用表格。正如您在图像中看到的，我在第一行、第二行和最后一行有一个渐变。我必须为所有的绿色细胞做这件事。正如您在最后一行中看到的那样，虽然有渐变，但分隔每列的白线消失了，因为我做了一个 colspan=11。这是我发现做类似事情的唯一方法

这是一些代码

HTML

    <tr>
       <td class="days selected">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       ...
    </tr>
    <tr>
       <td class="days">&nbsp;</td>
       <td class="days selected">&nbsp;</td>
       <td class="days">&nbsp;</td>
       ...
    </tr>
...
...
...
    <tr>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       <td class="days">&nbsp;</td>
       ...
       <div class="group">
           <td class="selected" colspan="11"></td>
       </div>
    </tr>

和 CSS

table tr td.selected{
   /*the gradient code here*/
}

/* I TRIED TO SET A STYLE FOR THE GROUP BUT WITHOUT ANY RESULTS*/
table tr div.group{
    background-color:red;   
}

有人对保持白线和渐变有任何提示吗？

4

2 回答 2

3

您应该将<td>'s 拆分为 11 个单个元素，background-size并在 CSS 中使用 andbackground-position使渐变看起来像是跨越了 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>

<td colspan="11">你有十一个<td style="colspan-11 col-n">元素，而不是一个元素n的数量。

在您的 CSS 中，您应该使背景渐变大小与 11 个元素加起来一样大。这是11 * width + 10 * border width，因为您在该区域内只有十个边界。在这种情况下<td>，我的宽度为 30 像素，边框的宽度为 2 像素，因此我们应该使背景11 * 30px + 10 * 2px = 350px变宽。我们可以background-size在 CSS 中做到这一点：

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

然后，您需要将背景渐变定位在每个元素中，使其显示为一个大渐变。对于第n' 个元素，我们需要将渐变n * (width + border width)向左移动。这是使用以下代码完成的：

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

有关完整代码和工作示例，请参阅我的 Fiddle。

于 2012-06-19T11:25:49.127 回答
0

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

  • 在顶部覆盖另一个表格以显示边框
  • 覆盖一个具有背景的 div，但给它一些透明度，以便边框显示
  • 在单元格之间拆分背景（或没有渐变）
于 2012-06-19T11:14:16.043 回答