टेबल हेड पर गोलाकार कोनों को कैसे बनाया जाए

Question

मैं जानना चाहता हूं कि केवल टेबल हेड पर गोलाकार कोनों को कैसे बनाया जाए?

अतिरिक्त जानकारी ... मैं तालिका का एक घुमावदार सिर रखना चाहता हूं, शेष तालिका एक आयताकार है, केवल पहले हेडर पंक्ति में गोलाकार कोनों होना चाहिए।

Answer 1

समस्या यह है कि आप दौर कुछ आंतरिक तत्वों बनाने की जरूरत है, है।

तो आपको इच्छा समाधान प्राप्त करने के लिए पहले वें और अंतिम वें दौर के लिए बनाना है।

table th:first-child{ 
    border-radius:10px 0 0 10px; 
} 

table th:last-child{ 
    border-radius:0 10px 10px 0; 
} 

Answer 2

यदि हम आपका कोड या कम से कम कोड आपके लिए काम नहीं करते हैं तो यह आपकी सहायता करना आसान होगा। या यह एक http://blog.jezmckean.com/css3-rounded-table-corners-no-images/

Answer 3

विकल्पों में से एक संख्या हैं:

वैसे भी, इस ट्यूटोरियल http://www.jeox.com/docs/manual/web/round_table_corners.html

संपादित अपने प्रश्न के लिए प्रासंगिक लगती है। यह इस बात पर निर्भर करता है कि आप वास्तव में क्या हासिल करना चाहते हैं।

लेकिन सुनिश्चित करें कि border-collapse पतन के लिए सेट नहीं है, क्योंकि यह काम नहीं करेगा। अधिक जानकारी के लिए इस लिंक mozilla देखें: https://developer.mozilla.org/en/CSS/border-radius

#uno, 
 
#due th, 
 
#tre th { 
 
    border-top-right-radius: 10px; 
 
    border-top-left-radius: 10px; 
 
    border: 1px solid black; 
 
} 
 
#tre td { 
 
    border: 1px solid black; 
 
}

<table id="uno" border="0"> 
 
    <tr> 
 
    <th>Header 1</th> 
 
    <th>Header 2</th> 
 
    </tr> 
 
    <tr> 
 
    <td>row 1, cell 1</td> 
 
    <td>row 1, cell 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>row 2, cell 1</td> 
 
    <td>row 2, cell 2</td> 
 
    </tr> 
 
</table> 
 

 
<br> 
 

 
<table id="due" border="1"> 
 
    <tr> 
 
    <th>Header 1</th> 
 
    <th>Header 2</th> 
 
    </tr> 
 
    <tr> 
 
    <td>row 1, cell 1</td> 
 
    <td>row 1, cell 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>row 2, cell 1</td> 
 
    <td>row 2, cell 2</td> 
 
    </tr> 
 
</table> 
 

 
<br> 
 

 
<table id="tre" border="0"> 
 
    <tr> 
 
    <th>Header 1</th> 
 
    <th>Header 2</th> 
 
    </tr> 
 
    <tr> 
 
    <td>row 1, cell 1</td> 
 
    <td>row 1, cell 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>row 2, cell 1</td> 
 
    <td>row 2, cell 2</td> 
 
    </tr> 
 
</table>