Utilizzo del ridimensionamento della casella per creare un bordo interno

Question

Voglio creare una tabella HTML in cui ogni cella è selezionabile e facendo clic su una cella si aggiunge un bordo al singolo div all'interno della cella. Voglio che il bordo di div esista interamente all'interno dei confini esistenti dello td che lo contiene, senza ridimensionare la tabella o le sue celle. Non riesco a farlo accadere correttamente.

Questo previous question sembra risolvere lo stesso problema e indica alcuni articoli sulle opzioni CSS per il ridimensionamento della casella. Ho un violino dove ho cercato di implementarlo senza successo: http://jsfiddle.net/YsAGh/3/.

* { 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
} 


<table> 
    <tr> 
    <td><div>1</div></td> 
    <td><div>2</div></td> 
    <td><div>3</div></td> 
    </tr> 
    .... 
</table> 

Ecco cosa succede attualmente. Il bordo fa crescere il contenitore td per contenere il bordo di div.

Come posso aggiungere il bordo al div senza influenzare la tabella che contiene?

Answer 1

Guarda il mio JSFiddle.

È necessario fornire una larghezza/altezza per le vostre cellule:

td { 
    // ... 
    width:33.3%; 
    height:33.3%; 
} 

Answer 2

ne dite di usare un inserto box-shadow?

.selected { 
    box-shadow: inset 0px 0px 0px 2px red; 
} 

Answer 3

OK, da quando ho visto un qualche supporto per la mia risposta nei commenti, qui come una risposta :)

Presize tuo cellulare con l'aggiunta di un bordo giallo 'nascosto' allo stato .unselected :

CSS

.unselected { 
    background-color: yellow; 
    border: 2px solid yellow; // Presize with this yellow border 
} 

div { 
    .. 
    line-height: 1; // Add line-height to regulate size (optional) 
} 

Codepen example.

Answer 4

Utilizzo di table-layout per risolvere la larghezza di celle e piccolo padding in selected per impedire l'aumento dell'altezza.

table { 
    table-layout: fixed; 
} 
.selected { 
    padding: 1px; 
} 

VediJSFiddle