Table cell borders are not displayed

Question

The above picture shows my problem: the cells in the image are designed so that around each of them there is a red frame with one pixel, but so far only one upper border is displayed.

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

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

Using the Chrome debugger, I see the class applied to the cell, and I can also see that the layout indicates that the cell must have the specified border, but it does not have red borders. Increasing the size or type of border between double and solid seems ineffective. Hovering over a cell shows borders without color.

How can I be wrong ?:-)

Refresh . Thanks for the input. The information in this color of the border with the red collapse is probably related to the reason why she is having problems.

Answer 1

You probably have some CSS error, here is an 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 need one pixel frame, perhaps you should use

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

Answer 2

solvable

Hello,

I had the same case when using bootstrap 3.

The problem I found is the bootstrap css property:

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

I rewrote it in my own CSS:

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

Then it worked ..!

Answer 3

try to 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 link below for feed

Thanks Maha