colspan TD 上的 CSS 边框 irr 行为答案

【问题标题】：CSS Border irr behavior on colspan TDcolspan TD 上的 CSS 边框 irr 行为
【发布时间】：2020-12-18 16:50:39
【问题描述】：

我有一个关于边框的 CSS 问题，问题是在具有 colspan 的 td 周围添加边框。

表格有属性：

<table cellspacing=0 cellpadding=0 border=0>

CSS 样式：

.tdclass{
    background-color:#FDBCC1;
}

.tdclass td{
    border-top: 3px solid white;
}

它的工作方式是这样的：

<tr class = "tdclass">
<td> ...
<td colspan="2"> ...
<td> ...
</tr>

这个 CSS 所做的是突出显示某些行并添加一条白线作为假的行间距。向<tr> 元素添加边框不起作用，只有在<td> 上工作。

现在这在所有单元格上都可以正常工作，除了带有“colspan”的单元格。问题是它生成了边框但它不是白色的，它是一样的颜色作为“.tdclass”中定义的单元格背景。这个问题好像仅发生在“colspan”<td> 元素上。所以效果看起来好像单元格从行上移了：

喜欢这样：

____-----____

那个小凹凸是<td>，其中包含“colspan”。它看起来像凹凸，因为所有其他单元格生成白色边框，而生成的边框具有与.tdclass“背景色”相同的颜色。

有什么理由吗？有解决办法吗？

【问题讨论】：

标签： css

【解决方案1】：

您的 td 中是否有任何带有 colspan 的内容？

IE、Firefox 和 Chrome 以三种不同的方式呈现以下内容：

<tr class = "tdclass">
 <td> blah</td>
 <td colspan="2"> </td>
 <td> blah</td>
</tr>

Chrome 可以满足您的期望。 Firefox 执行您所描述的操作。 IE 离开边框，不扩展背景色。

尝试在空单元格中插入&nbsp;。

【讨论】：

【解决方案2】：

直接给你的<td> 一个边框，例如css("border-top", "#808080 1px dotted")

【讨论】：