क्यों `tbody` एक पृष्ठभूमि में पृष्ठभूमि रंग सेट नहीं करता है? - जावास्क्रिप्ट, html, सीएसएस

मै इस्तेमाल कर रहा हूँ <tbody> सीएसएस चयनकर्ता के रूप में सेट करने के लिए background-color एक तालिका में। मैं ऐसा कर रहा हूं क्योंकि मेरे पास कई हैं <tbody> तालिका के भीतर अनुभाग, और उनके अलग-अलग पृष्ठभूमि रंग हैं।

मेरा मुद्दा यह है कि जब उपयोग कर रहा है border-radius कोशिकाओं पर, कोशिका सम्मान नहीं करती है background-color का tbody। यही है, सीमा त्रिज्या डिफ़ॉल्ट पृष्ठभूमि रंग (इस मामले में सफेद) में कोनों को काटती है, न कि tbody रंग (इस मामले में, हरा), नीचे।

अद्यतन: यह समस्या क्रोम / सफारी में होती है, लेकिन फ़ायरफ़ॉक्स में नहीं (बस सभी 3 पर खुद का परीक्षण किया गया है)। अभी भी Chrome पर वर्कअराउंड की तलाश में है (FOUND! देखें स्वीकृत उत्तर)।

tr:first-child td:first-child {
background-color: red;
border-radius: 25px;
}

table {
border-spacing: 0px;
}

table tbody {
background-color: green;
}

<table>
<tbody>
<tr>
<td><p>TOP LEFT</p></td>
<td><p>TOP RIGHT</p></td>
</tr>
<tr>
<td><p>BOT LEFT</p></td>
<td><p>BOT RIGHT</p></td>
</tr>
</tbody>
</table>

स्पष्ट होने के लिए, मैं जिस फिक्स की तलाश कर रहा हूं वह परिणामी उदाहरण को बदल देगा ताकि यह इस तरह दिखे (मैं "सिर्फ बदल रहा हूं" table tbody के लिए चयनकर्ता table केवल):

tr:first-child td:first-child {
background-color: red;
border-radius: 25px;
}

table {
border-spacing: 0px;
}

table { /* changed this line */
background-color: green;
}

<table>
<tbody>
<tr>
<td><p>TOP LEFT</p></td>
<td><p>TOP RIGHT</p></td>
</tr>
<tr>
<td><p>BOT LEFT</p></td>
<td><p>BOT RIGHT</p></td>
</tr>
</tbody>
</table>

मैं इस तरह से नहीं करना चाहता, क्योंकि मैं चाहता हूं कि पृष्ठभूमि का रंग उस पर हो tbody (जो मेरे पास कई हैं) पूरे पर नहीं table.

Tbody रंग शो के माध्यम से बनाने का कोई तरीका?

उत्तर:

बनाने की कोशिश करो <tbody> एक ब्लॉक तत्व की तरह प्रस्तुत करना।

tbody {
background-color: green;
display: block;
}

tr:first-child td:first-child {
background-color: red;
border-radius: 25px;
}
table {
border-spacing: 0px;
}
tbody {
background-color: green;
display: block;
}

<table>
<tbody>
<tr>
<td><p>TOP LEFT</p></td>
<td><p>TOP RIGHT</p></td>
</tr>
<tr>
<td><p>BOT LEFT</p></td>
<td><p>BOT RIGHT</p></td>
</tr>
</tbody>
</table>

अन्य उपयोगकर्ताओं के लिए एक अद्यतन उत्तर, यदि यह मदद करता है।

क्रोम पर, द display: block समस्या को हल करता है। हालांकि, यह तालिका के साथ अन्य लेआउट मुद्दों का कारण बनता है, जहां यह चौड़ाई का सम्मान नहीं करता है। का उपयोग करते हुए display: table इसके बजाय दोनों मुद्दों को हल करने के लिए लगता है:

tbody {
background-color: green;
display: table;
}

सेलस्प्रेसिंग को 0 पर सेट करें, टेबल पर बॉर्डरकोई नहीं, और टेबल की सीमाओं को ध्वस्त करें (यह सुनिश्चित करने के लिए कि रंगीन बक्से के आसपास जगह नहीं है)। फिर टीडी तत्व के बजाय टीडी तत्वों पर पृष्ठभूमि का रंग लागू करें।