表格单元格边框不显示答案

【问题标题】：Table cell borders do not show表格单元格边框不显示
【发布时间】：2014-09-14 11:20:17
【问题描述】：

上图显示了我的问题 - 图像中的单元格在每个单元格周围都有一个像素红色边框，但只显示了一个顶部边框。

我有一个 invalid 表格单元格类，它具有以下 CSS：

th.invalid, td.invalid {
    border: 1px double #b8202a;
}

使用 Chrome 调试器，我可以看到应用于单元格的类，并且我还可以看到布局声明单元格应该具有指定的边框，但它并不始终具有红色边框。增加双精度和实心之间的边框大小或类型似乎没有效果。将鼠标悬停在单元格上会显示边框没有颜色。

我可能做错了什么？ :-)

更新：感谢您的意见。这个border color with border-collapse 中的信息可能与它出现问题的原因有关。

【问题讨论】：

你有没有（推导）：table { border-collapse: collapse; border-spacing: 0; }
来吧，我们需要帮助您的详细信息，而不是模糊的信息......像 fiddle.jshell.net/b3wbq 这样的事情可能已经发生了。
我会尝试 !important 看看它是否有效，或者是否还有其他东西覆盖它。但正如我之前的其他人所说，如果不知道是否有东西覆盖它，很难回答。
请不要盲目推荐!important。它只会使样式表更加混乱，并且通常是结构不良的 HTML 或 CSS 的症状，应该改正。
@Daniel（和 SW4）：很抱歉，我无法发布更多信息，但你们已经给了我一些调查线索。谢谢

标签： html css google-chrome

【解决方案1】：

已解决

嗨，

我在使用 bootstrap 3 时遇到了同样的情况。

我发现的问题是引导程序的 css 属性：

table {    
    border-spacing: 0;
    border-collapse: collapse; /* here is the devil */  
}

我确实用我自己的 css 覆盖了它：

table,
table td {
    font-weight: bold;
    background-color: #fff;
    border-collapse: separate; /* This line */
}

然后它起作用了..！

【讨论】：

【解决方案2】：

您可能在 CSS 中有一些错误，这里有一个简单的示例 FIDDLE

<table>
  <tr>
    <th class="invalid">Text</th>
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
    <th>Text</th>
  </tr>
  <tr>
    <td class="invalid">Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
    <td>Text</td>
  </tr>
</table>

table,
th,
td {
  border: 1px solid #666;
  border-collapse: collapse;
}
th.invalid,
td.invalid {
  border: 1px double #b8202a;
}

但如果你想要单像素边框，也许你应该使用

th.invalid,
td.invalid {
  border: 1px solid #b8202a;
}

【讨论】：

如前所述，我尝试了边框宽度和类型的组合。您的 jsfiddle 在我的浏览器中呈现良好，但我可以看到，如果边框折叠生效，浏览器可能会出现问题，我会调查一下。谢谢

【解决方案3】：

尝试在代码下方添加 !important

th.invalid, td.invalid {
border: 1px double #b8202a !important;
}
table.invalid
 border: 1px double #b8202a !important; 
}
tr.invalid
{
border: 1px double #b8202a !important;
}

查看Fiddle 下面的链接

谢谢摩诃

【讨论】：

或者你可以，你知道 - 添加更多的 CSS 特异性而不使用 !important 标记。叹息。
同意我也不喜欢使用!important。但是，它可能有助于确定问题是否通过使用而自行解决