Tabelle Zellgrenzen nicht zeigen

Question

Das obige Bild zeigt mein Problem - die Zellen in dem Bild einen einzelnes Pixel roten Rand um jeden von ihnen haben sollten, doch nur eine obere Grenze zeigt, ist.

ich eine invalid Klasse für Tabellenzellen haben, die folgende CSS hat:

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

den Chrome-Debugger verwenden, kann ich die Klasse sehen an die Zelle angelegt, und ich kann auch, dass die Layout-Staaten sehen, dass Die Zelle sollte die angegebene Grenze haben, aber sie hat keine roten Grenzen. Das Erhöhen der Rahmengröße oder des Typs zwischen Double und Solid scheint keine Auswirkungen zu haben. Das Schweben über der Zelle zeigt, dass die Grenzen ohne Farbe sind.

Was mache ich wahrscheinlich falsch? :-)

Update: Danke für Ihre Eingabe. Die Informationen in diesem border color with border-collapse sind wahrscheinlich relevant für den Grund, warum es Probleme gibt.

Answer 1

hinzuzufügen versuchen! Important Code unten

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

den Link unten sehen für Fiddle

Danke Maha

Answer 2

Sie haben wahrscheinlich einige Fehler in CSS haben, hier ein kurzes Beispiel 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; 
} 

aber wenn Sie vielleicht einzelne Pixel Grenze wollen, sollten Sie

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

Answer 3

GELöST verwenden

Hallo,

ich den gleichen Fall hatte während Verwenden von Bootstrap 3.

Das Problem ich fand, war die CSS-Eigenschaft des Bootstrap:

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

ich es in meinem eigenen CSS überschreiben haben von:

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

Dann arbeitete sie ..!