使用 IE7 在 colgroup 上“模拟”边框宽度答案

【问题标题】："Simulate" border-width on colgroup with IE7使用 IE7 在 colgroup 上“模拟”边框宽度
【发布时间】：2011-09-09 08:55:07
【问题描述】：

假设我有这样的事情：

<table class="myTable">
  <colgroup span="2" /><colgroup span="2" />
  <tr><td>........</tr>

等等……

然后在样式表上：

table.myTable colgroup
{
    border-right: solid 5px #ffffff;
}

关键是我想要一些空间来分隔表中的 colgroup。

它在 Firefox 和 IE8 中运行良好。我已经在各处读到 IE7 没有为 colgroup 实现边框，但这是对您的想象力和创造力的召唤，有没有人知道我如何在 IE7 中实现类似的结果，而无需为每个单元格添加一个类或生成空的细胞...

这是 Firefox 4 中的结果示例：http://imageshack.us/photo/my-images/853/capturezz.png/ 生成的标头可以是任何形式的，有些情况非常复杂。这就是 colgroup 解决方案很有趣的原因，因为计算所需的跨度非常简单。

我们将不胜感激任何建议。

【问题讨论】：

【解决方案1】：

在 IE7 方面没有太多经验，但这可能有效：您可以检查是否可以设置背景图像。并将该图像（使用所需颜色）与单元格的右侧对齐，制作某种假边框外观。

在 chrome 中，在 colgroup 上设置边框不起作用。设置背景图像确实有效。

问候，

XpertEase

【讨论】：

我在这里得到了 chrome 11，边框确实有效。我看不出设置背景图像对我有什么帮助......因为我想在列组之间创建某种“间隙”，设置背景图像只会用适当的颜色填充这样的间隙，但我仍然必须创建这个差距。还是我误解了你的答案？
那么为什么需要边框呢？相反，您可以使用填充或边距。
因为这是获得我想要的结果的一种非常简单而优雅的方式......我添加了一个图像，说明我最初的问题所生成的内容。
然而不可能...与表格背景颜色相同颜色的背景图像可以解决问题。通过将图像与单元格的右侧对齐，仅垂直重复并在单元格右侧设置 5px 的填充，防止单元格中的文本与背景图像重叠。
你是对的，IE7 是不可能的......但据我所知，你的解决方案会导致向 右边缘上的所有 td 添加一个特定的类的 colgroup，这正是我不想在算法中添加的......

【解决方案2】：

为了在表格中使用边框属性，您必须设置以下规则。如果没有，您将无法获得它们

table {
border-collapse:collapse;
}

然后你会得到你假装的边界工作

【讨论】：