表单元格边框不显示

上图显示我的问题 - 细胞图像中是为了有一个单个像素的红色边框圆他们每个人，但只有一个顶部边框显示。

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

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

使用Chrome的调试器，我可以看到应用到单元格类，我也可以看到，布局规定， th细胞应该有指定的边界，但它不一致地有红色的边界。增加边框尺寸或类型之间的双重和固体似乎没有任何效果。将鼠标悬停在单元格上可以发现边框没有颜色。

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

更新：感谢您的输入。 border color with border-collapse中的信息可能与其存在问题的原因相关。

来源

2014-07-23 vogomatix

很难说没有更多的代码，你可以发布一个自包含的例子在你的问题或jsfiddle.net的行为？ – SW4

我怀疑我无法在jsFiddle中复制它 – vogomatix

只需使用Chrome开发人员工具（F12）中的dom检查器，然后查看哪一个类覆盖了这一个... – Daniel

-1

试加！下面的代码重要

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

请参见下面的链接Fiddle

感谢玛哈

来源

2014-07-23 10:23:36 user3820621

或者你可以，你知道 - 添加更多的CSS特性，而不是使用！重要的标签。叹。 – wildandjam

同意我不喜欢用'！important'。但是，它可能有助于发现问题是否通过使用来解决问题 – vogomatix

你可能在CSS一些bug，这里有一个简单的例子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; 
}

来源

2014-07-23 10:28:05 mdesdev

如前所述，我尝试过边框宽度和类型的组合。您的jsfiddle在我的浏览器中渲染得很好，但是我可以看到，如果border-collapse生效，浏览器可能会出现问题，我会研究这一点。谢谢 – vogomatix

不客气;） – mdesdev

解决

嗨，

我有，而同样的情况下，使用引导3.

，我发现这个问题是引导的CSS属性：

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

我没有覆盖它在我自己的CS：

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

然后它的工作..！

来源

2017-09-07 11:41:28

表单元格边框不显示

回答

相关问题