表单元格边框不显示

Question

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

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

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

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

我可能做错了什么？ ： - ）

更新：感谢您的输入。此border color with border-collapse中的信息可能与其出现问题的原因有关。

Answer 1

  

解决

您好，

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

我发现的问题是bootstrap的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 */
}

然后它工作..！

Answer 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;
}

Answer 3

尝试添加！重要的代码

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

请参阅以下Fiddle

链接

由于 诗