表单元格边框不显示

Question

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

我有一个invalid表格单元格的类,它有以下CSS:

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

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

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

更新:感谢您的意见.边框折叠的边框颜色信息可能与其出现问题的原因有关.

Answer 1

SOLVED

Hi,

I had the same case while using bootstrap 3.

The issue I found was the bootstrap's css property:

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

I did overwrite it in my own css by:

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

Then it worked..!

Answer 2

尝试添加 !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链接

谢谢玛哈