İç kenarlık oluşturmak için kutu boyutlandırmayı kullanma

Question

Her hücrenin tıklanabilir bir HTML tablosu oluşturmak istiyorum ve bir hücreye tıklandığında hücre içinde tek bir div kenarlık ekler. div 'un kenarlıklarını, tabloyu veya hücrelerini yeniden boyutlandırmadan içerdiği td'un mevcut sınırları içinde tamamen var olmasını istiyorum. Bunun doğru bir şekilde gerçekleşmesini sağlayamıyorum.

Bu previous question aynı sorunu ele alıyor ve kutu boyutlandırma CSS seçenekleri hakkında bazı makalelere işaret ediyor. Bunu başarılı olmadan uygulamaya çalıştığım bir keman var: 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> 

Şu anda ne olduğu aşağıdadır. Sınır, 'un div sınırına uygun olarak büyümesini sağlar.

Nasıl bu içeren tabloyu etkilemeden div sınırını katabilir?

Answer 1

JSFiddle adresime bakın.

Sen hücrelere bir genişlik/yükseklik sağlamak için gereken

:

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

Answer 2

Nasıl içerideki bir kutu-gölge kullanımı hakkında?

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

Answer 3

Tamam, görmeyeli burada yorumlarında benim yanıt için bazı destek bir cevap :) olarak

Presize .unselected devlete sarı kenarına hidden ekleyerek cep :

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

Artan yüksekliği önlemek için, hücre genişliğini venumaralı küçük padding genişliğini düzeltmek için table-layout'u kullanın.

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

JSFiddle