Table cell borders do not show

Question

The above image shows my problem - the cells in the image are meant to have a single pixel red border round each of them, yet only one top border is showing.

I have an invalid class for table cells which has the following CSS:

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

Using the Chrome debugger, I can see the class applied to the cell, and I can also see that the layout states that th cell should have the specified border yet it does not consistently have red borders. Increasing the border size or type between double and solid seems to have no effect. Hovering over the cell reveals the borders are there without color.

What am I likely to be doing wrong? :-)

Update: Thanks for your input. The information in this border color with border-collapse is probably relevant to the reason why it has issues.

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..!