क्या शुद्ध सीएसएस में <tbody /> पर सीमाएं प्राप्त करने का कोई साफ तरीका है?

Question

मैं एक पृष्ठभूमि है और एक <tbody/> पर एक गोल सीमा,

tbody { border-radius: 15px; border: 1px solid black; background: #ccf; } 

हालांकि इस तरह के रूप में, जब मैं Codepen, सीमा और पृष्ठभूमि रंग प्रदर्शन में यह कोशिश करते हैं लेकिन <tbody/> अभी भी वर्गाकार कोनों है निर्धारित करना चाहते हैं ।

मैं, कोनों पर अलग-अलग td रों को त्रिज्या लागू करने के लिए :last-child और :first-child चयनकर्ताओं की एक श्रृंखला का उपयोग कर इस समस्या को हल करने के लिए उदाहरण के लिए के रूप में कर सकती हूं

tbody tr:first-child td:first-child { border-top-left-radius: 15px; } 

This version does what I want (कम से कम, फ़ायरफ़ॉक्स के तहत) लेकिन यह भी बेहद वर्बोज़ और हैकी महसूस करता है, एक समस्या जो केवल तब खराब हो जाएगी जब मैं संगतता (-moz-, -webkit- इत्यादि) के लिए प्रीफ़िक्स्ड संस्करण जोड़ता हूं, और <td/> के अतिरिक्त <th/> तत्वों के लिए समर्थन करता हूं। क्या इस व्यवहार को प्राप्त करने का एक संक्षिप्त, शुद्ध-सीएसएस तरीका है?

Answer 1

मान लें कि आपने तालिका में सीमाओं को ध्वस्त कर दिया है, बस पर सेट करें और border-radius लागू करें।

Codepen example

सीएसएस

table { 
    width: 100%; 
    border-collapse: collapse; 
    display: block; 
    width: 600px; 
} 

tbody { 
    background: #ccf; 
    border: 1px solid black; 
    border-radius: 15px; 
    display: block; 
} 

th, td { 
    width: 200px; 
} 

td, th { 
    padding: 5px; 
    text-align: center; 
}