मेरी टेबल और सीमा-पतन पर एक गोलाकार सीमा कैसे हो सकती है: पतन?

Question

मैं निम्नलिखित है:

<TABLE style="border-radius: 5px; border: 1px solid #999; xborder-collapse: collapse;"> 
    <THEAD> 
    <TR style="background-color: red;"> 
     <TH>Weekday</TH> 
     <TH>Date</TH> 
     <TH>Manager</TH> 
     <TH>Qty</TH> 
    </TR> 
    </THEAD> 
    <TBODY> 
    <TR> 
     <TD>Mon</TD> 
     <TD>09/11</TD> 
     <TD>Kelsey</TD> 
     <TD>639</TD> 
    </TR> 
    <TR> 
     <TD>Tue</TD> 
     <TD>09/12</TD> 
     <TD>Lindsey</TD> 
     <TD>596</TD> 
    </TR> 
    <TR> 
     <TD>Sun</TD> 
     <TD>09/17</TD> 
     <TD>Susan</TD> 
     <TD>272</TD> 
    </TR> 
    </TBODY> 
</TABLE> 

Example

मैं गोल सीमाओं करना चाहते हैं, कोशिकाओं के बीच कोई स्थान भी मेरी मेज एक अलग रंग के शीर्ष हैडर क्षेत्र है। लेकिन यह काम नहीं लग रहा है।

मैंने यह पहेली बनाई है। जब मैं सीमा-पतन को टिप्पणी करता हूं तो मुझे गोलाकार किनारों मिलते हैं लेकिन कोशिकाओं के बीच की जगहें होती हैं। जब यह होता है तो मुझे कोई सीमा त्रिज्या नहीं होती है और कोशिकाओं के बीच कोई जगह नहीं होती है।

अद्यतन: यह ठीक करता है Fiddle

Answer 1

अपनी मेज टैग पर border-collapse:collapse के बजाय border-spacing:0 जोड़ना::

jsFiddle Demo

Answer 2

यहाँ एक आवरण का उपयोग कर एक उदाहरण है

यहाँ सही समाधान लगता है div:

<div style="display: table; 
      padding: 2px; 
      border-radius: 5px; 
      border: 1px solid #999;"> 
    <TABLE style="border-collapse: collapse;"> 
    <THEAD> 
     <TR style="background-color: red;"> 
     <TH>Weekday</TH> 
     <TH>Date</TH> 
     <TH>Manager</TH> 
     <TH>Qty</TH> 
     </TR> 
    </THEAD> 
    <TBODY> 
     <TR> 
     <TD>Mon</TD> 
     <TD>09/11</TD> 
     <TD>Kelsey</TD> 
     <TD>639</TD> 
     </TR> 
     <TR> 
     <TD>Tue</TD> 
     <TD>09/12</TD> 
     <TD>Lindsey</TD> 
     <TD>596</TD> 
     </TR> 
     <TR> 
     <TD>Sun</TD> 
     <TD>09/17</TD> 
     <TD>Susan</TD> 
     <TD>272</TD> 
     </TR> 
    </TBODY> 
    </TABLE> 
</div> 

आप यहाँ काम कर यह देख सकते हैं: jsFiddle

नोट: display:table; पहले IE7 में समर्थित नहीं है और। IE8 को दस्तावेज़ में !DOCTYPE की आवश्यकता है। सभी आधुनिक ब्राउज़र (आईई 9 समेत) हालांकि इसका समर्थन करते हैं, इसलिए यह कोई समस्या नहीं होनी चाहिए।