表單元格邊框不顯示

上圖顯示我的問題 - 細胞圖像中是爲了有一個單個像素的紅色邊框圓他們每個人，但只有一個頂部邊框顯示。

我有一個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

表單元格邊框不顯示

回答

相關問題