使垂直 GridLines 出现在跨越的表格单元格的顶部

Question

我正在开发一个 ASP.Net 项目。我的页面上有一个<asp:Table> 控件，其中的列和单元格是从代码隐藏添加的。许多单元格跨越不止一列。

这是当前的图表。我需要垂直延伸的微弱网格线越过粉红色和绿色条的顶部。

我尝试了一种简单的 CSS 方法，将单元格 z-index 属性设置为 0，然后将表格 z-index 设置为 1，但这不起作用（我假设表格的 CSS 会覆盖单元格的 CSS） .

我将jQuery.corner 用于单元格的圆角，因此这可能会进一步增加复杂性。

2012 年 13 月 2 日更新

目前，这些网格线实际上是左侧带有 CSS 虚线边框的空表格单元格。这样做的原因是我尝试让 GridLines 出现在顶部，但我做不到，所以实际上我的代码目前没有尝试这样做。所以我的问题应该是，有没有办法做到这一点？

我无法在 JSFiddle 上正确应用圆角和样式，所以我使用了 pastebin，请将文本 here 复制到纯 html 文件中，您应该得到类似于上图的正确输出 - 请让我知道它是否看起来不同/角落是方形的。

注意：如果您使用 IE 查看文件并使用 IE 开发人员工具，则可以选择勾勒表格单元格的轮廓，这对此非常有用。

Answer 1

我认为，如果不是让彩色单元格跨越多个单元格，而是为单个单元格着色，那么网格线将被保留。我不知道你的标记是什么样的，我不建议你完全使用这个标记，但这里有一个可能看起来如何的示例：http://jsbin.com/ilinap/edit#html,live

Answer 2

我强烈建议您提供一个我们可以分析的活生生的例子，以便我们提供明确的答案。现在，通过纯粹的猜测，您的插件或您似乎用来着色和四舍五入的任何东西似乎通过插入浮动 div 将上述效果应用到表格本身的“上方”，因此为什么垂直分隔线没有显示通过.

好的，我进入了你提供的jquery圆角页面，我上面所说的基本上是插件的工作原理，在这里，按照他们自己的定义：

重要的是要了解这个角落插件通过向页面添加更多元素来发挥其魔力。 具体来说，它将 div“条”添加到要拐角的项目上，并在这些条上设置纯色背景色，以隐藏真实项目的实际拐角。因此，如果您退后一步查看角落元素，请考虑有纯色 div 隐藏您希望更改的项目的真正方形角落。这可以帮助您了解这个小插件的固有局限性**。 **它最适合对块级元素进行四舍五入（div、段落等），并且在尝试对内联元素进行四舍五入时可能会带来更多挑战（跨度、锚点等）。

最近我在浏览器中添加了对原生 border-radius 舍入的支持 支持它（Opera 10.5+、Firefox、Safari 和 Chrome）。所以在 那些浏览器的插件只是简单地在元素上设置一个 css 属性。 但是在 IE 中，我们必须等待版本 9 才能支持它。 对于所有浏览器，选择“圆形”以外的模式需要 使用“div stips”方法。

所以下一个合乎逻辑的问题是：

1.- 您在设计时是否考虑到了 IE？您的网站是否可以跨浏览器兼容？
2.- 如果您的大多数用户没有使用 IE，那么我建议放弃该插件并在需要时只使用border-radius。

最终，如果您想在插件的飞行 div 上应用垂直线，您将需要应用重复模式覆盖透明图像，这会令您的用户感到困惑，因为他们将单击图像而不是下面的表格和单元格内容它。

所以...让我知道你想做什么，我会提供更好的答案。