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

Posted 2023-02-22

【中文标题】使垂直 GridLines 出现在跨越的表格单元格的顶部

【英文标题】：Making vertical GridLines appear over the top of spanned table cells

【发布时间】：2011-09-10 20:04:34

【问题描述】：

我正在开发一个 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 开发人员工具，则可以选择勾勒表格单元格的轮廓，这对此非常有用。

【问题讨论】：

如果没有视觉效果 - “现在看起来如何”和“您希望它看起来如何”，您的问题很难回答！

你的实际代码是什么？我们现在知道，你想要，但不知道你拥有什么

@yunzen：谢谢，请看编辑

在 RowDataBound 中添加单元格后是否尝试添加网格线？

【参考方案1】：

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

【讨论】：

这是否允许文本跨越单元格？也许在第一个单元格中有一个浮动 div 并带有一些巧妙的 z-indexing 魔法？

文本使情况变得更加困难......我没有一个简单的解决方案。您可以做的一件事是将文本放在绝对定位的 div 中，然后使用 jQuery 设置 div 的尺寸和位置。

但除此之外，似乎将文本添加到跨单元格同时还保留网格线可能看起来有点奇怪......也许你可以重新设计你的布局，并在这个过程中让它有点更容易开发？

【参考方案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 上应用垂直线，您将需要应用重复模式覆盖透明图像，这会令您的用户感到困惑，因为他们将单击图像而不是下面的表格和单元格内容它。

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

【讨论】：

好的，谢谢。要回答您的问题，它是 100% 针对 IE 的，因为它针对我工作场所的仅使用 Internet Explorer 的 Intranet。其他我不关心的浏览器。

好的，你能发布一个现场样本吗？如果你这样做了，我向你保证一个实时的、有效的修复。

好吧，我发现了问题......当你给任何

'colspan=5' 或其他什么时，你基本上是在做所谓的'合并单元格'。合并单元格失去了它们的边界和相邻单元格的边界，至少是左边的那些......

你绝对需要合并单元格吗？

不幸的是:(在现场示例中，我删除了一些细节，因为它是我工作场所的内部内容，但在框中通常有一些文本可以轻松跨越多个单元格（一个天）。

【参考方案3】：

在我看来，最好的方法是使用带有微弱线条的背景，并让它在圆角 div 上重复-x。只要网格的大小始终相同，并且背景被切割成精确的像素，我看不出它不起作用的原因。

也许您也需要为不同的颜色设置不同的背景。希望有道理。

【讨论】：

我刚刚确认 jQuery.corner 可以很好地处理重复的背景图像。祝你好运！

【参考方案4】：

将表格放入具有position:relative; 的DIV 中添加另一个具有“覆盖”类的DIV在具有半透明背景的表格之后，与表格大小相同：

.overlay 
    position:absolute;
    background-image:url(../images/grid.png); <-- you need to make this image
    top:0;
    left:0;
    width: 900px;   <--- set you your table dimensions
    height:900px;   <---
    opacity: .4;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";

【讨论】：

不幸的是，静态网格图像不起作用 - 表格是动态生成的，因此它是可变宽度/单元格大小等。