使垂直网格线出现在跨越表格单元格上方

Question

使垂直网格线出现在跨越表格单元格上方

javascriptjqueryasp.netcsshtml-table

6

我正在开发一个ASP.Net项目。在我的页面上有一个<asp:Table>控件，可以从代码后端添加列和单元格。许多单元格跨越多个列。

这是目前的图表。我需要纵向运行的淡网格线覆盖粉色和绿色条形块。

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

我正在使用jQuery.corner来实现单元格的圆角，因此可能会增加更多复杂性。

更新于2012年2月13日

目前，这些网格线实际上是带有CSS虚线边框的空表格单元。原因是我尝试让网格线出现在最上层，但没有成功，所以我的代码目前实际上没有尝试实现它。因此我的问题应该是，有没有方法可以做到这一点？

我无法在JSFiddle上正确应用圆角和样式，因此我使用了pastebin，请将文本here复制到纯html文件中，然后您应该得到与上面图片类似的正确输出-请告诉我是否看起来不同/角落是方形的。

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

- Arj

1

你的问题很难回答，没有可视化的东西 - “现在看起来怎么样”和“你想让它看起来怎么样”！ - Yahia

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

你在 RowDataBound 添加单元格后尝试添加网格线了吗？ - Cerveser

4个回答

1

我强烈建议您提供一个我们可以分析的实时示例，以便我们能够给出明确的答案。现在，仅凭猜测，您似乎正在使用插件或其他方式来给表格上色和圆角，并且通过插入浮动的div元素来应用这些效果，因此垂直分隔线没有显示出来。

好的，我进入了您提供的jQuery圆角页面，上述内容基本上就是该插件的工作原理，在他们自己的定义中，如下所示：

重要的是要理解，这个角落插件通过向页面添加更多元素来实现其魔力。具体而言，它向要转角的项目添加div“条纹”，并在这些条纹上设置实心背景颜色，以隐藏真实项目的实际角落。因此，如果您退后一步看转角元素，请想象有实心颜色的div隐藏了您希望更改的项目的真正方形角落。这可以帮助您了解此小型插件的固有限制。它最适合圆角块级元素（div、段落等），在尝试将内联元素（跨度、锚点等）圆角化时可能会遇到更多挑战。

最近，我为支持本地边框半径舍入添加了支持，支持它的浏览器（Opera 10.5+、Firefox、Safari和Chrome）。因此，在这些浏览器中，插件只需在元素上设置css属性。但在IE中，我们必须等待9版本才能支持它。对于所有浏览器，选择除“round”之外的模式需要使用“div stips”方法。

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

1. 你是否在设计时考虑了IE浏览器？你的网站是否要兼容各种浏览器？ 2. 如果大多数用户不使用IE浏览器，我建议放弃插件，只在需要时使用border-radius。

最终，如果你想在插件的飞行div上覆盖垂直线条，你需要应用一个重复图案叠加的透明图片，但这会让你的用户感到困扰，因为他们可能会点击图片而不是图片下面的表格和单元格内容。

所以... 告诉我你想做什么，我会给出更好的答案。

- Capagris

好的，谢谢。回答你的问题，它是100%针对IE的，因为它是为我工作场所的内部网络设计的，只使用Internet Explorer。其他浏览器我不关心。 - Arj

好的，你能发布一个现场样本吗？如果你这样做，我保证给你提供一个实时的、可工作的修复方法。 - Capagris

好的，我找到问题所在了...当你给任何一个<td> 'colspan=5'或其他值时，你基本上正在做所谓的“合并单元格”。合并单元格会失去其边框以及左侧相邻单元格的边框... - Capagris

你是否一定需要合并单元格？ - Capagris

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

显示剩余2条评论

1

在我看来，最好的方法是使用带有淡线的背景，并让它在圆角div上重复-x。只要网格始终具有相同的大小且背景被剪切到确切的像素，我认为没有理由它不起作用。

也许您需要为不同的颜色使用不同的背景。希望这有意义。

- Francis Kim

我刚刚确认了jQuery.corner可以很好地与重复的背景图片配合使用。祝你好运！ - Francis Kim

0

将表格放在一个具有position:relative;的DIV中，在表格之后添加另一个类名为"overlay"的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)";
}

- Diodeus - James MacFarlane

很遗憾，使用静态网格图像是行不通的 - 表格是动态生成的，因此它具有可变的宽度/单元格大小等。 - Arj

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DMac the Destroyer · Accepted Answer

我认为如果您不要让彩色单元格跨越多个单元格，而是只对单个单元格进行着色，则网格线将被保留。我不知道您的标记是什么样子的，并且我不建议您完全使用这种标记，但是这里有一个潜在的例子，展示了它可能会是什么样子：http://jsbin.com/ilinap/edit#html,live。