Wie erzwinge die Rahmenfarbe einer Zelle in einer HTML-Tabelle

Ich bin sicher, das ist wirklich einfach. Wie kann ich den Randstil einer Zelle erzwingen, um die anderen Werte um sie herum zu überschreiben?Wie erzwinge die Rahmenfarbe einer Zelle in einer HTML-Tabelle

Das Problem ist in der Abbildung unten dargestellt. Ich will die Grenze der ‚Heute‘ Zelle zwingen, vollständig auf allen Seiten, schwarz zu sein, anstatt nur unten und rechts:

Hier wird das Beispiel in JSFiddle ist

CSS-Code :

td { 
    border: 1px solid #ccc; 
} 

.event { 
    border: 2px solid gray !important; 
} 

.today { 
    border: 2px solid black !important; 
}

Tabelle html:

<table class="table"> 
    <tr> 
    <td>Detail</td> 
    <td>Detail</td> 
    <td class="event">Event</td> 
    <td>Detail</td> 
    <td>Detail</td> 
    </tr> 
    <tr> 
    <td>Detail</td> 
    <td class="event">Event</td> 
    <td class="today">Today</td> 
    <td class="event">Event</td> 
    <td>Detail</td> 
    </tr> 
    <tr> 
    <td>Detail</td> 
    <td>Detail</td> 
    <td class="event">Event</td> 
    <td>Detail</td> 
    <td>Detail</td> 
    </tr> 
</table>

Quelle

2016-03-26 Adam

Das Hauptproblem ist hier die Verwendung des Grenz-Kollaps: Kollaps; Stil. Zu lösen, dass Sie eine der folgenden Lösungen könnten versuchen:

Lösung 1:

Sie könnten versuchen, eine andere Grenze Stil hinzu:

.today { 
    border: 2px double black!important; 
}

Hier ist eine Geige:

https://jsfiddle.net/h1t0ctmx/

Hier ist eine Dokumentation über die Grenzkonfliktlösung:

https://www.w3.org/TR/REC-CSS2/tables.html#border-conflict-resolution

Lösung 2:

Alternativ können Sie fügen Sie einfach das folgende in der Umgebung Tabelle:

table { 
    border-collapse: separate; 
}

Hier ist eine aktualisierte Geige:

https://jsfiddle.net/ggckr5mL/

Hier ist eine Dokumentation über die border-collapse Eigentum und einige Beispiele, die das Verhalten erklären:

https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse

Quelle

2016-03-26 18:28:09

Dank hilft, aber das ändert die Grenzen aller anderen Zellen - ich möchte nur die Grenze einer Zelle auf erzwingen. – Adam

Hallo ich habe die Antwort aktualisiert. Ich nehme an, Sie haben hier nicht viele Möglichkeiten. Was ich auch versuchte, war, umreiß zu verwenden: 2px solides Schwarzes! Wichtig. –

Ich aktualisierte die Antwort ... Lösung 2 könnte, was Sie suchen. –

-1

Wenn Sie jQuery verwenden können, als dies helfen würde, sein kann. Add jquery ..

// Add Jquery 
$('td:contains("Today")').addClass('today'); 

//Add css 

.today { 
border: 1px solid red; 
}

jsbin

Quelle

2016-03-26 19:31:58 Pushpan

Er fragt nicht, wie man eine CSS-Klasse hinzufügt. Er fragt nach der Tatsache, dass die Grenze nur unten und rechts erscheint. –

Danke. Bekannt. Mein Bad – Pushpan

-1

Eine noch bessere Lösung ist spezifischer in der CSS werden Sie verwenden. Es ist nicht immer die richtige Art zu verwenden, wichtig, obwohl es nicht falsch ist. In komplexeren Anwendungen kann dies zu Problemen führen. Wenn Sie dieses Styling ein anderes Mal übersteuern möchten, können Sie dies nur tun, indem Sie ein wenig schlampig (mit mindestens einem anderen! Wichtig).

Spezifisches CSS ist stärker als das weniger spezifische CSS. Zum Beispiel ".table .today" wird ".today" überschreiben.

td { 
    border: 1px solid #ccc; 
} 

.table .event { 
    border: 2px solid gray; 
} 

.table .today { 
border: 2px double black; 
}

ein Beispiel gesehen: https://jsfiddle.net/crix/fuy687nb/

bei Werfen Sie einen Blick: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Quelle

2016-03-26 22:47:03 Crix

Die Frage ist nicht über das! Wichtige Attribut und Ihre CSS-Linie funktioniert nicht einmal für seinen Fall! –

Werfen Sie einen Blick auf dieses Beispiel: https://jsfiddle.net/0bhyq3f7/ Es funktioniert nicht ohne das! Wichtige Attribut –

Das ist, weil Sie nicht das exakt gleiche Styling verwendet haben :). Versuchen Sie einen Blick auf: https://jsfiddle.net/crix/fuy687nb/ – Crix

Hier eine aktualisierte Version des CSS und HTML mit border-collapse als fix ist. Hoffe, es

table { 
 
    border-collapse: separate; 
 
} 
 
td { 
 
    border: 1px solid #ccc; 
 
} 
 

 
.event { 
 
    border: 2px solid gray !important; 
 
} 
 

 
.today { 
 
    border: 2px solid black !important; 
 
}

<table class="table"> 
 
    <tr> 
 
    <td>Detail</td> 
 
    <td>Detail</td> 
 
    <td class="event">Event</td> 
 
    <td>Detail</td> 
 
    <td>Detail</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Detail</td> 
 
    <td class="event">Event</td> 
 
    <td class="today">Today</td> 
 
    <td class="event">Event</td> 
 
    <td>Detail</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Detail</td> 
 
    <td>Detail</td> 
 
    <td class="event">Event</td> 
 
    <td>Detail</td> 
 
    <td>Detail</td> 
 
    </tr> 
 
</table>

Quelle

2016-03-27 11:41:38 SCJ

Wie erzwinge die Rahmenfarbe einer Zelle in einer HTML-Tabelle

Antwort

Verwandte Themen