अंदरूनी सीमा बनाने के लिए बॉक्स आकार का उपयोग करना

Question

मैं एक HTML तालिका बनाना चाहता हूं जहां प्रत्येक सेल क्लिक करने योग्य हो, और सेल पर क्लिक करने से कक्ष के भीतर एकल div पर सीमा हो जाती है। मैं चाहता हूं कि div की सीमा पूरी तरह से td की मौजूदा सीमाओं के भीतर मौजूद है जिसमें तालिका या इसकी कोशिकाओं का आकार बदलने के बिना यह शामिल है। मैं इसे सही तरीके से नहीं कर सकता।

यह previous question एक ही मुद्दे को संबोधित करता है और बॉक्स आकार के सीएसएस विकल्पों के बारे में कुछ लेखों को इंगित करता है। मेरे पास एक पहेली है जहां मैंने सफलता के बिना इसे लागू करने की कोशिश की: 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> 

वर्तमान में यह क्या होता है। div की सीमा को समायोजित करने के लिए सीमा बढ़ने के लिए सीमा td है।

मैं इसे कैसे युक्त तालिका को प्रभावित किए बिना div करने के लिए सीमा जोड़ सकते हैं?

Answer 1

मेरे JSFiddle पर देखें।

आप अपने कोशिकाओं को एक चौड़ाई/ऊंचाई प्रदान करने की आवश्यकता:

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

Answer 2

कैसे एक इनसेट बॉक्स छाया का उपयोग कर के बारे में?

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

Answer 3

ठीक है, के बाद से मैंने देखा है एक टिप्पणी में मेरी प्रतिक्रिया है, यहाँ के लिए कुछ समर्थन यह एक जवाब के रूप में :)

Presize .unselected राज्य के लिए एक पीले रंग की 'छुपा' बॉर्डर जोड़कर अपने सेल :

सीएसएस

.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

बढ़ती ऊंचाई को रोकने के लिए selected में कोशिकाओं की चौड़ाई और padding को ठीक करने के लिए table-layout का उपयोग करना।

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

JSFiddle