एक div - html, css का उपयोग कर तालिका सेल में पोजिशनिंग सर्कल

मैं एचटीएमएल और सीएसएस के लिए नया हूँ और एक दिलचस्प हैमुसीबत। मैं टेबल सेल के भीतर ऊंचाई और चौड़ाई 40px की लाल सर्कल को स्थानांतरित करना चाहता हूं, और इस ऊंचाई और चौड़ाई को बनाए रखना चाहे टेबल सेल ऊंचाई या चौड़ाई चाहे। तो यह निम्नानुसार दिखेगा:

यहां छवि विवरण दर्ज करें

सर्कल के साथ हमेशा केंद्रित और एक ही आकार और शेष कोशिका सफेद जगह के रूप में। यदि संभव हो, तो मैं इसे भी एक सीएसएस वर्ग का उपयोग करके करना चाहूंगा:

   td.circle {
background: #f00;
width: 40px;
height: 40px;
right:50%;
bottom: 50%;
vertical-align: middle;
transform: translate (50%,50%);
border-radius: 50%;
}

फिलहाल, कोड मैंने सेल की चौड़ाई या ऊंचाई के साथ मंडलियों के साथ विस्तार और ऊंचाई बढ़ा दी है, क्या ऐसा होने का रोकने का कोई तरीका है?

उत्तर:

जवाब के लिए 2 № 1

यदि आप "में एक div डाल नहीं सकते हैं td और इसे अपने सर्कल के रूप में उपयोग करें, तो यह एक छद्म तत्व के लिए नौकरी की तरह लगता है।

table {
width: 80%;
margin: 1em auto;
}
td {
border: 1px solid grey;
}
td.circle:before {
content: attr(data-char);
display: block;
background: #f00;
width: 40px;
height: 40px;
line-height:40px;
text-align:center;
vertical-align: middle;
border-radius: 50%;
margin:0 auto;
}
<table>
<tr>
<td class="circle" data-char="H"></td>
<td class="circle" data-char="I"></td>
<td class="circle" data-char="J"></td>
<td class="circle" data-char="K"></td>
</tr>
</table>

दूसरा समाधान

क्या मैं ईमानदारी से कह सकता हूं कि मैं इसे पसंद नहीं करता हूं वास्तविक पृष्ठभूमि छवि परंतु अगर इसे शुद्ध सीएसएस होना है और हमें किसी भी तत्व के अंदर अनुमति नहीं है td हम एक प्रतिबंधित परिपत्र रेडियल ढाल का उपयोग कर सकते हैं।

.circle {
background-image:
-webkit-radial-gradient(
circle,
red, red 20px, transparent 20px
);
background-image:
radial-gradient(
circle,
red, red 20px, transparent 20px
);
border:1px solid grey;
}

table {
width: 80%;
margin: 1em auto;
table-layout: fixed;
text-align: center;
}

td {
height: 40px;
}
<table>
<tr>
<td class="circle">1</td>
<td class="circle">2</td>
<td class="circle">3</td>
<td class="circle">4</td>
</tr>
</table>


उत्तर № 2 के लिए 1

आप इस तरह एक div के साथ कर सकते हैं।

table {
width: 50%;
}
td {
border: 1px solid;
text-align: center;
vertical-align: middle;
width: 25%;
height: 80px;
}
.circle {
content: "";
background: transparent;
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
border: 3px solid red;
border-radius: 50%;
}
<table>
<tr>
<td><div class="circle">H</div></td>
<td><div class="circle">I</div></td>
<td><div class="circle">J</div></td>
<td><div class="circle">K</div></td>
</tr>
</table>

एक टिप्पणी के आधार पर अद्यतन करें।

पॉलिसी के छद्म का उपयोग करके यहां एक विकल्प है position: absoluteहालांकि, मैं अभी भी उपयोग करने की सलाह देते हैं <td class="circle" data-char="H"></td> बजाय। यह बेहतर नियंत्रण देता है क्योंकि पत्र छद्म के अंदर है, बाहर नहीं, क्योंकि इसे एक होना चाहिए।

table {
width: 50%;
}
td {
border: 1px solid;
text-align: center;
vertical-align: middle;
width: 25%;
height: 80px;
position: relative;
}
.circle:before {
content: "";
background: transparent;
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
border: 3px solid red;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<table>
<tr>
<td class="circle">H</td>
<td class="circle">I</td>
<td class="circle">J</td>
<td class="circle">K</td>
</tr>
</table>


संबंधित सवाल
सबसे लोकप्रिय