Używanie rozmiarów skrzynek do utworzenia wewnętrznej granicy

Question

Chcę utworzyć tabelę HTML, w której każda komórka jest klikalna, a kliknięcie komórki powoduje dodanie granicy do pojedynczej komórki div. Chcę, aby ta granica div istniała całkowicie w obrębie istniejącej granicy td, która go zawiera, bez zmiany rozmiaru tabeli lub jej komórek w ogóle. Nie wydaje mi się, żeby to się stało poprawnie.

Wydaje się, że ten numer previous question dotyczy tego samego problemu i wskazuje niektóre artykuły dotyczące opcji CSS rozmiaru pudełka. Mam skrzypce, gdzie próbowałem to bez powodzenia wdrożyć: 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> 

Oto, co się obecnie dzieje. Obramowanie powoduje, że zawierający się plik td rośnie, aby pomieścić granicę div.

Jak mogę dodać obramowanie do div to bez wpływu na tabelę zawierającą?

Answer 1

Spójrz na moją JSFiddle.

Trzeba zapewnić szerokość/wysokość do komórek:

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

Answer 2

Jak o użyciu box-shadow wstawka?

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

Answer 3

OK, ponieważ Widziałem pewne wsparcie dla mojej odpowiedzi w komentarzach, tutaj jako odpowiedź :)

presize Twoja komórka dodając żółtą „ukryte” granicę stanu .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

Używanie table-layout do ustalania szerokości komórek i małego padding w w selected, aby zapobiec wzrostowi wysokości.

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

ZobaczJSFiddle