Table cell borders do not show

10
votes

No borders showing

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.

3
htmlcssgoogle-chrome
Have you got (a derivation of): table { border-collapse: collapse; border-spacing: 0; } - SW4
come on, we need details to help you, not vague information... Something Like this fiddle.jshell.net/b3wbq might have happend. - Daniel
I would just try to !important it to see if it works or is there still something overwriting it. But as the others before me said, it's hard to answer without knowing if there is something overwriting it or not. - ProDexorite
Please don't blindly suggest !important. It just makes style sheets more confusing and is usually a symptom of badly structured HTML or CSS that should be corrected instead. - RoToRa
@Daniel (and SW4): I am sorry I cannot post more information but you guys have given me some leads to look into. Thanks - vogomatix

3 Answers

6
votes

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

1
votes

You probably have some bug in CSS, here's a quick example 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;
}

but if you want single pixel border maybe you should use

th.invalid,
td.invalid {
  border: 1px solid #b8202a;
}
-1
votes

try add !important below code 

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

See the below link for Fiddle

Thanks Maha