CSS3 की सीमा-त्रिज्या संपत्ति और सीमा-पतन: पतन मिश्रण नहीं है। मैं गोल कोनों के साथ ढह गई तालिका बनाने के लिए बॉर्डर-त्रिज्या का उपयोग कैसे कर सकता हूं?

Question

संपादित करें - मूल शीर्षक: वहाँ प्राप्त करने के लिए एक वैकल्पिक तरीका है border-collapse:collapseमें CSS(आदेश में एक ध्वस्त हो गई, गोल कोने तालिका के लिए में)?

चूंकि यह पता चला है कि बस तालिका की सीमाओं को ढहने से जड़ समस्या का समाधान नहीं होता है, इसलिए मैंने चर्चा को बेहतर ढंग से दर्शाने के लिए शीर्षक को अपडेट किया है।

मैंCSS3 border-radius संपत्ति का उपयोग करके गोल कोनों के साथ एक तालिका बनाने की कोशिश कर रहा हूं । मैं जिस टेबल स्टाइल का उपयोग कर रहा हूं वह कुछ इस तरह है:

table {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}

यहाँ समस्या है। मैं भी border-collapse:collapseसंपत्ति सेट करना चाहता हूं , और जब सेट किया जाता है तो वह border-radiusकाम नहीं करता है। क्या सीएसएस-आधारित तरीका है जैसा कि मैं उसी तरह का प्रभाव प्राप्त कर सकता हूंborder-collapse:collapse वास्तव में इसका उपयोग किए बिना ?

संपादन:

मैंने यहाँ समस्या का प्रदर्शन करने के लिए एक सरल पृष्ठ बनाया है (फ़ायरफ़ॉक्स / सफारी केवल)।

ऐसा लगता है कि समस्या का एक बड़ा हिस्सा यह है कि तालिका को गोल कोनों में सेट करने से कोने के tdतत्वों के कोने प्रभावित नहीं होते हैं। यदि तालिका सभी एक रंग की थी, तो यह एक समस्या नहीं होगी क्योंकि मैं tdक्रमशः पहले और अंतिम पंक्ति के लिए ऊपर और नीचे के कोने गोल कर सकता था। हालांकि, मैं शीर्षकों को अलग करने और पट्टी करने के लिए अलग-अलग पृष्ठभूमि के रंगों का उपयोग कर रहा हूं, इसलिए आंतरिक tdतत्व अपने गोल कोनों को भी दिखाएगा।

प्रस्तावित समाधानों का सारांश:

गोल कोनों के साथ किसी अन्य तत्व के साथ तालिका को घेरने से काम नहीं चलता है क्योंकि तालिका के वर्ग कोनों के माध्यम से "खून बह रहा है।"

0 पर सीमा चौड़ाई निर्दिष्ट करना तालिका को ध्वस्त नहीं करता है।

tdसेलस्प्रेसिंग को शून्य पर सेट करने के बाद भी नीचे के कोने चौकोर होते हैं।

इसके बजाय जावास्क्रिप्ट का उपयोग करना- समस्या से बचकर काम करता है।

संभव समाधान:

तालिकाओं को PHP में उत्पन्न किया जाता है, इसलिए मैं प्रत्येक बाहरी वें / tds में से प्रत्येक के लिए एक अलग वर्ग लागू कर सकता हूं और प्रत्येक कोने को अलग-अलग शैली दे सकता हूं। मैं ऐसा नहीं करूंगा, क्योंकि यह बहुत सुंदर नहीं है और कई तालिकाओं पर लागू करने के लिए दर्द का एक सा है, इसलिए कृपया सुझाव आते रहें।

संभव समाधान 2 कोनों को स्टाइल करने के लिए जावास्क्रिप्ट (jQuery, विशेष रूप से) का उपयोग करना है। यह समाधान भी काम करता है, लेकिन अभी भी काफी नहीं है जो मैं देख रहा हूं (मुझे पता है कि मैं picky हूं)। मेरे पास दो आरक्षण हैं:

1. यह एक बहुत ही हल्की साइट है, और मैं जावास्क्रिप्ट को न्यूनतम न्यूनतम स्तर तक रखना चाहूंगा
2. मेरे लिए सीमा-त्रिज्या का उपयोग करने की अपील का एक हिस्सा अनुग्रहपूर्ण गिरावट और प्रगतिशील वृद्धि है। सभी गोल कोनों के लिए सीमा-त्रिज्या का उपयोग करके, मुझे CSS3-सक्षम ब्राउज़र में लगातार गोल साइट और दूसरों में एक लगातार वर्ग साइट (मैं आपको देख रहा हूँ, IE) होने की उम्मीद है।

मुझे पता है कि आज CSS3 के साथ ऐसा करने की कोशिश करना बेकार लग सकता है, लेकिन मेरे पास मेरे कारण हैं। मैं यह भी बताना चाहूंगा कि यह समस्या w3c विनिर्देशन का परिणाम है, न कि CSS3 के खराब समर्थन का, इसलिए कोई भी समाधान तब भी प्रासंगिक और उपयोगी होगा जब CSS3 का अधिक व्यापक समर्थन हो।

Comments

क्या आप टेबल को एक div में सेट नहीं कर सकते हैं, बॉर्डर-त्रिज्या और div पर "ओवरफ्लो: हिडन" सेट कर सकते हैं? मैंने अभी-अभी परीक्षण किया है और यह ठीक काम करता है, जब तक कि आपको एक ऐसे div में स्क्रॉलिंग / विस्तार की आवश्यकता नहीं है जिसमें चौड़ाई / ऊँचाई ठीक हो या उसके माता-पिता जो करते हैं।

— इयान

पिछले सीएसएस स्टेटमेंट में अर्धविराम का अभाव है, मुझे लगता है।

— जेन्सेग

यह सवाल 2009 में पूछा गया था। मैं थोड़ा हैरान हूं कि 2015 में नीचे सूचीबद्ध लोगों की तुलना में बेहतर समाधान नहीं हैं। W3C को कुछ साल पहले यह तय करना चाहिए था।

— जोनाथन एम

Answer 1

मैं यह समझ गया। आपको बस कुछ विशेष चयनकर्ताओं का उपयोग करना है।

तालिका के कोनों को गोल करने में समस्या यह थी कि td तत्व भी गोल नहीं बने थे। आप कुछ इस तरह से हल कर सकते हैं:

table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

अब सब कुछ ठीक से गोल हो गया है, सिवाय इसके कि अभी भी border-collapse: collapseसब कुछ तोड़ने का मुद्दा है ।

तालिका में डिफ़ॉल्ट जोड़नेborder-spacing: 0 और छोड़ने के लिए एक वर्कअराउंड है border-collapse: separate।

Comments

HTML के साथ घूमने के बजाय, border-spacing: 0;सीमा शैली के रूप में क्यों नहीं जोड़ा जाता है?

— रेमन तयाग

मुझे टीडी टैग के बजाय टीआर टैग की पृष्ठभूमि का रंग निर्धारित करने में समस्या हो रही थी। सुनिश्चित करें कि यदि आप अपनी तालिका स्ट्रिप कर रहे हैं, तो आप टीडी की पृष्ठभूमि रंग को सेट कर रहे हैं न कि TR।

— शेवर

खैर अगर आपको टीआर पर बैकग्राउंड-कलर का इस्तेमाल करना पड़े तो क्या होगा ? क्या यह सभी के लिए संभव है?

— मोहोच

बस border-spacing: 0;रेमन की तरह जोड़ने के लिए यह मेरे लिए तय की सलाह देते हैं। सुनिश्चित करें कि आप जोड़ रहे हैं border-radiusऔर border-spacingकरने के लिए शैलियों <th>या <td>तत्वों, नहीं <thead>या <tbody>।

— गैविन

मैं बूटस्ट्रैप का उपयोग कर रहा हूं और मैंने रेमन की सलाह का उपयोग करके समाधान ढूंढ लिया है, जैसे:border-spacing: 0; border-collapse: separate;

— कैनर SAYGIN

Answer 2

निम्न विधि "वास्तविक" सीमा box-shadowके 1pxबजाय एक प्रसार के साथ उपयोग करके (क्रोम में परीक्षण) काम करती है ।

table {
    border-collapse: collapse;
    border-radius: 30px;
    border-style: hidden; /* hide standard table (collapsed) border */
    box-shadow: 0 0 0 1px #666; /* this draws the table border  */ 
}

td {
    border: 1px solid #ccc;
}

Comments

यह केवल एक चीज है जिसने मेरे लिए काम किया है। हालांकि टेबल बॉर्डर पर सही रंग मिलना मुश्किल है।

— थॉमस अहले

यदि आपकी तालिका में आसपास के क्षेत्र की तुलना में अलग पृष्ठभूमि का रंग है, तो यह उपयोग करने योग्य नहीं है ।

— g.pickardou

आपके कोड के लिए धन्यवाद, यह फ़ायरफ़ॉक्स 26.0 के साथ भी काम करता है

— अधिकतम

@ g.pickardou तालिका तत्व पर 'अतिप्रवाह: छिपा हुआ' जोड़कर समस्या को नियंत्रित किया जा सकता है।

— Val

बॉक्स-शैडो टेबल को बड़ा बनाता है और इसलिए साइड अब कट जाती हैं।

— रे

Answer 3

यदि आप CSS-only समाधान चाहते हैं ( cellspacing=0HTML में सेट करने की आवश्यकता नहीं है ) जो 1px सीमाओं (जो आप border-spacing: 0समाधान के साथ नहीं कर सकते हैं) के लिए अनुमति देता है , तो मैं निम्नलिखित करना पसंद करता हूं:

• एक सेट border-rightऔर border-bottomअपनी मेज की कोशिकाओं के लिए ( tdऔरth )
• कोशिकाओं को पहली पंक्ति में दें aborder-top
• पहले कॉलम में सेल दें aborder-left
• first-childऔर last-childचयनकर्ताओं का उपयोग करके , चार कोनों में तालिका कोशिकाओं के लिए उपयुक्त कोनों को गोल करें।

यहां एक डेमो देखें।

निम्नलिखित HTML को देखते हुए:

नीचे उदाहरण देखें:

   

 .custom-table{margin:30px;}
    table {
        border-collapse: separate;
        border-spacing: 0;
        min-width: 350px;
        
    }
    table tr th,
    table tr td {
        border-right: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
        padding: 5px;
    }
    table tr th:first-child, table tr th:last-child{
    border-top:solid 1px      #bbb;}
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
        
    }
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
    }
    table tr th {
        background: #eee;
        text-align: left;
    }
    
    table.Info tr th,
    table.Info tr:first-child td
    {
        border-top: 1px solid #bbb;
    }
    
    /* top-left border-radius */
    table tr:first-child th:first-child,
    table.Info tr:first-child td:first-child {
        border-top-left-radius: 6px;
    }
    
    /* top-right border-radius */
    table tr:first-child th:last-child,
    table.Info tr:first-child td:last-child {
        border-top-right-radius: 6px;
    }
    
    /* bottom-left border-radius */
    table tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
    }
    
    /* bottom-right border-radius */
    table tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
    }
         

<div class="custom-table">
    <table>
        <tr>
            <th>item1</th>
            <th>item2</th>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
    </table>
</div>

Comments

कृपया उत्तर लिखें जिसमें (स्थायी) कोड शामिल है। यदि उत्तर के लिए बहुत सारे कोड हैं, तो बस संबंधित बिट्स और एक स्पष्टीकरण पोस्ट करें कि वे प्रासंगिक क्यों हैं।

— शमूएल हरमर

यह एक महान समाधान है, लेकिन इसे पढ़ना थोड़ा कठिन था। मैंने शैली के कुछ नियमों को फिर से लिखा है और कोड का स्पष्टीकरण जोड़ा है, इसलिए उम्मीद है कि इससे मदद मिलती है।

— माइकल मार्टिन-स्मकर

मेज पर एक त्रिज्या भी लागू करें, अन्यथा यह अजीब लग रहा है जब आप तालिका में एक पृष्ठभूमि लागू करते हैं।

— बकरी

क्या करता है table.Infoवर्ग कुछ भी साथ क्या करना है?

— पाइलिनक्स

Answer 4

क्या आपने table{border-spacing: 0}इसके बजाय उपयोग करने की कोशिश की है table{border-collapse: collapse}???

Comments

धन्यवाद, यह मुझे वह करने की आवश्यकता है जो मुझे करना चाहिए (जिसमें नीचे दिए गए सभी टीडी वाले 'गोल कोने' बॉक्स के बाहर शीर्ष पर TH तत्वों की एक श्रृंखला शामिल थी)

— RonLugge

इसके साथ समस्या border-spacing: 0यह है कि आपके पास 1px सीमा नहीं हो सकती है, है ना? क्योंकि सीमाएं ढहने के बजाए ढेर हो जाती हैं।

— माइकल मार्टिन-स्मकर

border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden;मैं वास्तव में क्या जरूरत है उपज।

— मिलाद.नोजारी

Answer 5

आपको संभवतः तालिका के चारों ओर एक और तत्व रखना होगा और एक गोल सीमा के साथ शैली।

काम कर रहे मसौदा निर्दिष्ट करता है कि border-radiusतालिका तत्वों पर लागू नहीं होता है जब का मूल्य border-collapseहै collapse।

Comments

यह कुछ ऐसा था जिसे मैं भी मानता था, लेकिन अगर मैं टेबल को घेरने के लिए एक div बनाता हूं और इसे गोल कोनों में सेट करता हूं, तो स्क्वायर टेबल कोनों से भी खून बहता है। नव-पोस्टेड उदाहरण देखें।

— vamin

सबसे अच्छा समझौता जो मैं पा सकता था, वह तालिका में एक THEAD ब्लॉक जोड़ रहा था और इसे ग्रे पृष्ठभूमि लागू कर रहा था (तालिका पर #eee के साथ)। शीर्षलेख कक्ष इसके सामने TABLE की सीमा के पीछे बह गए। फिर मैंने ओवरफ्लो को छिपाने के लिए टेबल बॉर्डर को 3px तक बढ़ा दिया।

— user59200

@vamin "के माध्यम से खून बह रहा है" - यदि आप उपयोग नहीं करते हैंoverflow:hidden;

— ब्रायन मैककॉन

तो इस स्थिति में हर कोई इन पेज b2n.ir/table-radius के

— AmerllicA

Answer 6

जैसा कि इयान ने कहा, समाधान एक div के अंदर तालिका को घोंसला बनाना और इसे इस तरह सेट करना है:

.table_wrapper {
  border-radius: 5px;
  overflow: hidden;
}

के साथ overflow:hidden, वर्ग कोनों div के माध्यम से खून बहाना नहीं होगा।

Comments

ध्यान रखें, जो कोई भी इसका उपयोग करना चाहता है, कि overflow: hiddenकिसी भी पॉपओवर / टूलटिप के साथ रैपर के आयामों से जुड़ जाएगा।

— user776686

Answer 7

मेरे ज्ञान का सबसे अच्छा करने के लिए, केवल एक ही तरीका है कि आप सभी कोशिकाओं को संशोधित कर सकें:

table td {
  border-right-width: 0px;
  border-bottom-width: 0px;
}

और फिर नीचे और दाईं ओर सीमा प्राप्त करने के लिए

table tr td:last-child {
  border-right-width: 1px;
}
table tr:last-child td {
  border-bottom-width: 1px;
}

:last-child ie6 में मान्य नहीं है, लेकिन यदि आप उपयोग कर रहे हैं border-radius मुझे लगता है कि आप परवाह नहीं करते हैं।

संपादित करें:

अपने उदाहरण पृष्ठ को देखने के बाद, ऐसा प्रतीत होता है कि आप सेल स्पेसिंग और पेडिंग के साथ इसके आसपास काम करने में सक्षम हो सकते हैं।

आपके द्वारा देखी जा रही मोटी ग्रे बॉर्डर वास्तव में टेबल की पृष्ठभूमि है (यदि आप सीमा का रंग लाल करने के लिए बदलते हैं तो आप इसे स्पष्ट रूप से देख सकते हैं)। यदि आप कक्ष को शून्य पर सेट करते हैं (या समकक्ष:td, th { margin:0; } ग्रे "बॉर्डर" गायब हो जाएगा।

संपादित करें 2:

मुझे केवल एक तालिका के साथ ऐसा करने का कोई तरीका नहीं मिला। यदि आप अपनी हेडर पंक्ति को नेस्टेड टेबल में बदलते हैं, तो आप संभवतः वह प्रभाव प्राप्त करने में सक्षम हो सकते हैं जो आप चाहते हैं, लेकिन यह अधिक काम करेगा, और गतिशील नहीं।

Comments

मैंने सेलस्पेसिंग = 0 के साथ एक उदाहरण जोड़ा है, और यह बहुत करीब है। अवांछनीय सीमाएं गायब हो जाती हैं, लेकिन नीचे के कोनों को अभी भी खून बह रहा है।

— vamin

आपकी सहायता के लिए एक बार फिर से धन्यवाद। तालिकाओं में php उत्पन्न होते हैं, इसलिए मैं सोच रहा हूं कि अगर कोई एलीगेंट सॉल्यूशन प्रस्तावित नहीं है, तो मैं प्रत्येक कोने में एक क्लास असाइन करूँगा / td और उन्हें अलग से स्टाइल करूँगा।

— vamin

Answer 8

मैंने छद्म तत्वों का उपयोग करके :beforeऔर :afterपर वर्कअराउंड की कोशिश कीthead th:first-child औरthead th:last-child

एक के साथ तालिका लपेटने के साथ संयोजन में <div class="radius borderCCC">

table thead th:first-child:before{ 
    content:" ";
    position:absolute;
    top:-1px;
    left:-1px;
    width:15px;
    height:15px;
    border-left:1px solid #ccc;
    border-top:1px solid #ccc; 
    -webkit-border-radius:5px 0px 0px;
}
table thead th:last-child:after{ 
    content:" "; 
    position:absolute; 
    top:-1px;
    right:-1px; 
    width:15px;
    height:15px;
    border-right:1px solid #ccc;
    border-top:1px solid #ccc;
    -webkit-border-radius:0px 5px 0px 0px;
}

देख jsFiddle

मेरे लिए क्रोम में काम करता है (13.0.782.215) मुझे बताएं कि क्या यह आपके लिए अन्य ब्राउज़रों में काम करता है।

Answer 9

वास्तव में आप अपने आवरण के रूप में अपने tableअंदर जोड़ सकते हैं div। और फिर इन CSSकोड को रैपर को सौंपें :

.table-wrapper {
  border: 1px solid #f00;
  border-radius: 5px;
  overflow: hidden;
}

table {
  border-collapse: collapse;
}

Answer 10

दिए गए उत्तर केवल तब काम करते हैं जब मेज के चारों ओर कोई सीमा नहीं होती है, जो बहुत सीमित है!

मेरे पास ऐसा करने के लिए SASS में एक मैक्रो है, जो बाहरी और पूरी तरह से समर्थन करता है आंतरिक सीमाओं , सीमा-पतन के समान स्टाइल को प्राप्त करना: वास्तव में इसे निर्दिष्ट किए बिना पतन।

FF / IE8 / Safari / Chrome में परीक्षण किया गया।

सभी ब्राउज़रों में शुद्ध CSS में अच्छी गोल सीमाएँ देता है लेकिन IE8 (ग्रेसफुल तरीके से) क्योंकि IE8 सीमा-त्रिज्या का समर्थन नहीं करता है :(

कुछ पुराने ब्राउज़रों के साथ काम करने के लिए विक्रेता उपसर्गों की आवश्यकता हो सकती हैborder-radius , इसलिए उन उपसर्गों को अपने कोड में जोड़ने के लिए स्वतंत्र महसूस करें।

यह उत्तर सबसे छोटा नहीं है - लेकिन यह काम करता है।

.roundedTable {
  border-radius: 20px / 20px;
  border: 1px solid #333333;
  border-spacing: 0px;
}
.roundedTable th {
  padding: 4px;
  background: #ffcc11;
  border-left: 1px solid #333333;
}
.roundedTable th:first-child {
  border-left: none;
  border-top-left-radius: 20px;
}
.roundedTable th:last-child {
  border-top-right-radius: 20px;
}
.roundedTable tr td {
  border: 1px solid #333333;
  border-right: none;
  border-bottom: none;
  padding: 4px;
}
.roundedTable tr td:first-child {
  border-left: none;
}

इस शैली को लागू करने के लिए बस अपना परिवर्तन करें

<table>

निम्नलिखित को टैग करें:

<table class="roundedTable">

और अपने HTML में उपरोक्त CSS शैलियों को शामिल करना सुनिश्चित करें।

उम्मीद है की यह मदद करेगा।

Comments

अब आपको सीमा-त्रिज्या के लिए उपसर्गों की आवश्यकता नहीं है, FF 3.6 (-moz) की अपेक्षा करें। इसके अलावा, -khtml निश्चित रूप से अब आवश्यक नहीं है।

— जोनातन लिटके

@JonatanLittke, आप हमेशा उत्तर को संपादित कर सकते हैं यदि आपको लगता है कि इसमें सुधार किया जा सकता है। मैंने सभी उपसर्गों को हटा दिया और caniuse.com के लिए एक लिंक जोड़ दिया ताकि लोग उपसर्गों के बारे में अपने निर्णय ले सकें border-radius।

— माइकल मार्टिन-स्मूकर

Answer 11

एक बॉर्डर और स्क्रॉल करने योग्य तालिका के लिए, इसका उपयोग करें (वेरिएबल्स को बदलें, $ग्रंथों को शुरू करते हुए)

आप का उपयोग करते हैं thead, tfootया th, बस की जगह tr:first-childऔर tr-last-childऔर tdउन लोगों के साथ।

#table-wrap {
  border: $border solid $color-border;
  border-radius: $border-radius;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }

HTML:

<div id=table-wrap>
  <table>
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
    <tr>
       <td>3</td>
       <td>4</td>
    </tr>
  </table>
</div>

Answer 12

मुझे भी यही समस्या थी। border-collapseपूरी तरह से निकालें और उपयोग करें: cellspacing="0" cellpadding="0" html दस्तावेज़ में। उदाहरण:

<table class="top_container" align="center" cellspacing="0" cellpadding="0">

Comments

यह काम करता है, लेकिन यह आपको प्रभाव प्राप्त करने के लिए फर्स्टचिल्ड / लास्ट लिटिल ट्रिक का उपयोग करने की आवश्यकता है।

— थॉमस अहले

Answer 13

मैंने इसके लिए CSS का एक पागल सेट लिखा है जो पूरी तरह से काम करता है:

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
table td,
table th {
  border-right: 1px solid #CCC;
  border-top: 1px solid #CCC;
  padding: 3px 5px;
  vertical-align: top;
}
table td:first-child,
table th:first-child {
  border-left: 1px solid #CCC;
}
table tr:last-child td,
table tr:last-child th {
  border-bottom: 1px solid #CCC;
}
table thead + tbody tr:first-child td {
  border-top: 0;
}
table thead td,
table th {
  background: #EDEDED;
}

/* complicated rounded table corners! */
table thead:first-child tr:last-child td:first-child {
  border-bottom-left-radius: 0;
}
table thead:first-child tr:last-child td:last-child {
  border-bottom-right-radius: 0;
}
table thead + tbody tr:first-child td:first-child {
  border-top-left-radius: 0;
}
table thead + tbody tr:first-child td:last-child {
  border-top-right-radius: 0;
}
table tr:first-child td:first-child,
table thead tr:first-child td:first-child {
  border-top-left-radius: 5px;
}
table tr:first-child td:last-child,
table thead tr:first-child td:last-child {
  border-top-right-radius: 5px;
}
table tr:last-child td:first-child,
table thead:last-child tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}
table tr:last-child td:last-child,
table thead:last-child tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

/* end complicated rounded table corners !*/

Answer 14

बॉर्डर-पतन के साथ समाधान: टेबल और डिस्प्ले के लिए अलग: इनबॉइड और टेबल के लिए इनलाइन-टेबल।

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px;
  background: transparent;   
}
table thead {
  display: inline-table;
  width: 100%;
  background: #fc0 url(../images/bg-heading.png) repeat-x 0% 0;
  -webkit-border-top-left-radius: 7px;
  -moz-border-radius-topleft: 7px;
  -webkit-border-top-right-radius: 7px;
  -moz-border-radius-topright: 7px;
    border-radius: 7px 7px 0px 0px;
  padding: 1px;
  padding-bottom: 0;
}

table tbody {
  border: 1px solid #ddd;
  display: inline-table;
  width: 100%;
  border-top: none;        
}

Comments

इस उत्तर को सामुदायिक विकि बनाने का कोई कारण नहीं है। ऐसा करने से ऐसा होता है कि आपको अपने जवाब से कोई प्रतिष्ठा नहीं मिलेगी।

— ताकसवेल

Answer 15

मैं एचटीएमएल और सीएसएस के साथ नया हूं और मैं इसके लिए समाधान भी तलाश रहा था, यहां मुझे क्या मिलेगा।

table,th,td {
   border: 1px solid black;
   border-spacing: 0
}
/* add border-radius to table only*/
table {
   border-radius: 25px    
}
/* then add border-radius to top left border of left heading cell */
th:first-child {
   border-radius: 25px 0 0 0
}
/* then add border-radius to top right border of right heading cell */
th:last-child {
   border-radius: 0 25px 0 0
}
/* then add border-radius to bottom left border of left cell of last row */
tr:last-child td:first-child {
   border-radius: 0 0 0 25px
}
/* then add border-radius to bottom right border of right cell of last row */
tr:last-child td:last-child {
   border-radius: 0 0 25px 0
}

मैं यह कोशिश करता हूं, लगता है कि यह क्या काम करता है :)

Answer 16

एक ही समस्या में चलाने के बाद यह उत्तर मिला, लेकिन यह बहुत सरल है: बस तालिका अतिप्रवाह दें: छिपा हुआ

लपेटने वाले तत्व की आवश्यकता नहीं। दी, मुझे नहीं पता कि यह 7 साल पहले काम किया होगा जब सवाल शुरू में पूछा गया था, लेकिन अब यह काम करता है।

Comments

यह एक चतुर समाधान है लेकिन यह वास्तविक सीमा को भी "हटा" देता है। Chrome में तालिका की दाईं सीमा और नीचे की सीमा गायब हो जाती है और सभी गोल कोनों में कोई सीमा नहीं होती है।

— एलेक्स जोर्गेनसन

Answer 17

गोल कोनों और बॉर्डर वाली कोशिकाओं के साथ तालिका। @ रेमन टयाग समाधान का उपयोग करना ।

कुंजी का उपयोग करना है border-spacing: 0क्योंकि वह इंगित करता है।

समाधान का उपयोग कर एससीएसएस ।

$line: 1px solid #979797;
$radius: 5px;

table {
  border: $line;
  border-radius: $radius;
  border-spacing: 0;
  th,
  tr:not(:last-child) td {
    border-bottom: $line;
  }
  th:not(:last-child),
  td:not(:last-child) {
    border-right: $line;
  }
}

Answer 18

मैं "प्रदर्शन" के साथ प्रयोग शुरू कर दिया और मैंने पाया है कि: border-radius, border, margin, padding, एक में tableसाथ प्रदर्शित होते हैं:

display: inline-table;

उदाहरण के लिए

table tbody tr {
  display: inline-table;
  width: 960px; 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

लेकिन हमें widthहर कॉलम के सेट की जरूरत है

tr td.first-column {
  width: 100px;
}
tr td.second-column {
  width: 860px;
}

Answer 19

यहाँ एक हालिया उदाहरण है कि http://medialoot.com/preview/css-ui-kit/demo.html से गोल कोनों वाली तालिका को कैसे लागू किया जाए । यह ऊपर जोएल पॉटर द्वारा सुझाए गए विशेष चयनकर्ताओं पर आधारित है। जैसा कि आप देख सकते हैं, इसमें IE को थोड़ा खुश करने के लिए कुछ जादू भी शामिल है। इसमें पंक्तियों के रंग को वैकल्पिक करने के लिए कुछ अतिरिक्त शैलियाँ शामिल हैं:

table-wrapper {
  width: 460px;
  background: #E0E0E0;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7');
  background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D7D7D7));
  background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7);
  padding: 8px;
  -webkit-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -moz-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -o-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -khtml-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -webkit-border-radius: 10px;
  /*-moz-border-radius: 10px; firefox doesn't allow rounding of tables yet*/
  -o-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.table-wrapper table {
  width: 460px;
}
.table-header {
  height: 35px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: center;
  line-height: 34px;
  text-decoration: none;
  font-weight: bold;
}
.table-row td {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  font-weight: normal;
  color: #858585;
  padding: 10px;
  border-left: 1px solid #ccc;
  -khtml-box-shadow: 0px 1px 0px #B2B3B5;
  -webkit-box-shadow: 0px 1px 0px #B2B3B5;
  -moz-box-shadow: 0px 1px 0px #ddd;
  -o-box-shadow: 0px 1px 0px #B2B3B5;
  box-shadow: 0px 1px 0px #B2B3B5;
}
tr th {
  border-left: 1px solid #ccc;
}
tr th:first-child {
 -khtml-border-top-left-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  -o-border-top-left-radius: 8px;
  /*-moz-border-radius-topleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-left-radius: 8px;
  border: none;
}
tr td:first-child {
  border: none;
}
tr th:last-child {
  -khtml-border-top-right-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -o-border-top-right-radius: 8px;
  /*-moz-border-radius-topright: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-right-radius: 8px;
}
tr {
  background: #fff;
}
tr:nth-child(odd) {
  background: #F3F3F3;
}
tr:nth-child(even) {
  background: #fff;
}
tr:last-child td:first-child {
  -khtml-border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -o-border-bottom-left-radius: 8px;
  /*-moz-border-radius-bottomleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-left-radius: 8px;
}
tr:last-child td:last-child {
  -khtml-border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -o-border-bottom-right-radius: 8px;
  /*-moz-border-radius-bottomright: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-right-radius: 8px;
}

Answer 20

यहाँ एक तरीका है:

div {
  ...
  overflow: hidden;
  border-radius: 14px;
  transform: rotate(0deg);
}
table {
  border-spacing: 0;
}

<div>
  <table></table>
</div>

या

    div {
      ...
      overflow: hidden;
      border-radius: 14px;
      position: relative;
      z-index: 1;
    }

Answer 21

मैं हमेशा इस तरह से सैस का इस्तेमाल करता हूं

table {
  border-radius: 0.25rem;
  thead tr:first-child th {
    &:first-child {
      border-top-left-radius: 0.25rem;
    }
    &:last-child {
      border-top-right-radius: 0.25rem;
    }
  }
  tbody tr:last-child td {
    &:first-child {
      border-bottom-left-radius: 0.25rem;
    }
    &:last-child {
      border-bottom-right-radius: 0.25rem;
    }
  }
}

Comments

मुझे लगता है कि आप इसे प्राप्त नहीं कर सकते, वह border-collapse: collapseसक्षम के साथ ऐसा करने की कोशिश कर रहा है ।

— giovannipds

@giovannipds अपने स्वयं के उत्तर (स्वीकृत उत्तर) पर एक नज़र डालें। मेरा तरीका सिर्फ एक और तरीका है। अब "-1" को हटा दें।

— डिएगो मेलो

ओह, मुझे क्षमा करें, आप निश्चित रूप से सही हैं, मेरी गलती है, उसका स्वीकृत उत्तर बिल्कुल वही बात कहना प्रतीत होता है। मुझे सवाल के शीर्षक में जो लिखा गया था, उससे चिपके रहना था, उन्होंने जोर दिया कि वह सीमा-पतन चाहते हैं इसलिए मैं सीधे इसके पास गया। अगर मैं कर सकता हूं तो मैं -1 को हटा दूंगा, लेकिन मैं ऐसा नहीं कर सकता, आपको मुझे अनुमति देने के लिए उत्तर में कुछ संपादित करना होगा। इस बारे में कुछ बताने की कोशिश करें कि यह संभव नहीं है border-collapse: collapse। फिर से क्षमा करें, मैं आपके अपडेट की प्रतीक्षा करूंगा।

— giovannipds

Answer 22

अब तक का सबसे अच्छा समाधान आपके स्वयं के समाधान से आता है और यह इस प्रकार है:

table, tr, td, th{
  border: 1px solid; 
  text-align: center;
}

table{
	border-spacing: 0;
  width: 100%;
  display: table;
}

table tr:last-child td:first-child, tr:last-child, table {
    border-bottom-left-radius: 25px;
}

table tr:last-child td:last-child, tr:last-child, table {
    border-bottom-right-radius: 25px;
}


table tr:first-child th:first-child, tr:first-child, table {
    border-top-left-radius: 25px;
}

table tr:first-child th:last-child, tr:first-child, table {
    border-top-right-radius: 25px;
}

<table>
  <tr>
    <th>Num</th><th>Lett</th><th>Lat</th>
  </tr>
  <tr>
    <td>1</td><td>A</td><td>I</td>
  </tr>
  <tr>
    <td>2</td><td>B</td><td>II</td>
  </tr>
  <tr>
    <td>3</td><td>C</td><td>III</td>
  </tr>
</table>

Answer 23

सीमा-त्रिज्या अब आधिकारिक रूप से समर्थित है। तो, उपरोक्त सभी उदाहरणों में आप "-moz-" उपसर्ग छोड़ सकते हैं।

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