Grenze TD Nehmen, die innerhalb der TD Dimensionen

Question

In einer Kalenderanwendung bleibt ich den folgenden (etwas vereinfacht) Stil bin mit den aktuell ausgewählten Tabellenzellen in einer HTML-Tabelle markieren:

border:solid 2px black; 

Das Problem ist, , dass dies außerhalb der Tabellenzelle expandiert, um so die Reihe enthält, erweitert, wie in den folgenden Bildern zu sehen:

unselektierten

ausgewählt

Gibt es eine CSS-Methode, um die Grenze zu zwingen, „drinnen bleiben“, um die Tabellenzelle und nicht die enthält Reihe erweitern?

Answer 1

nutzt

box-sizing: border-box; 

, so dass Ihre Grenze wird nicht andere Zellen umspannt

Answer 2

Zusammen mit box-sizing:

box-sizing: border-box; 

den Browser zu zwingen, die Breite des border (und padding) zu übernehmen innerhalb der angegebenen Breite gibt es auch die mögliche Verwendung von box-shadow:

box-shadow: inset 0 0 0 2px #000; 

Obwohl dies leider einen Pseudo-Rand ergibt, kann es nur eine feste Grenze sein.

Answer 3

html { 
    box-sizing:border-box 
} 
*,*:before,*:after { 
    box-sizing: inherit 
} 

Ich benutze dies an der Spitze meiner Stylesheets. Die erste setzt die Eigenschaft box-sizing für das gesamte Dokument auf border-box, wodurch beim Festlegen der Höhe und Breite eines Elements alle Abstände und Umrandungen berücksichtigt werden. Ohne dies gilt das Standard-Box-Modell, wo ein Element zuerst Höhe und Breite, dann Auffüllung und dann Grenzen erhält.

Die zweite Zeile hilft, wenn Sie Komponenten oder Code von jemand anderem verwenden, wo sie box-sizing auf etwas anderes eingestellt haben könnten. Das bedeutet, dass sie für diese Codeschnipsel ihre box-sizing behalten. Die Vererbung bedeutet, dass, sobald das Element des enthaltenden Elements geschlossen ist, das nächste Element das DOM erbt und schließlich border-box übernimmt.

Chris Coyier hat 2014 ein schönes Stück über inheriting box-sizing gemacht, das etwas detaillierter geht.