टेबल पंक्ति पर सीमा त्रिज्या कैसे जोड़ें

Question

क्या किसी को पता है कि हमें कैसे tr शैली पसंद है?

मैंने टेबल पर बॉर्डर-पतन का उपयोग किया है, उसके बाद ट्र के 1px ठोस बॉर्डर प्रदर्शित कर सकता हूं जो मैं उन्हें देता हूं।

हालाँकि, जब मैंने कोशिश की है -moz-border-radius, यह काम नहीं करता है। यहां तक ​​कि साधारण मार्जिन भी काम नहीं करता है।

Answer 1

आप केवल सीमा-त्रिज्या को td पर लागू कर सकते हैं, tr या तालिका में नहीं। मैंने इन शैलियों का उपयोग करके गोल कोनों वाली तालिकाओं के लिए इसे प्राप्त किया है:

table { border-collapse: separate; }
td { border: solid 1px #000; }
tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }
tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }

सभी विक्रेता उपसर्ग प्रदान करना सुनिश्चित करें। एक्शन में इसका एक उदाहरण है ।

Comments

सही। यदि आप IE में गोल कोनों चाहते हैं, तो आपको छवियों और अजीब मार्कअप का उपयोग करना होगा।

— theazureshadow

@ हेंसन: नहीं यह नहीं होगा क्योंकि CSS3 IE <9 में समर्थित नहीं है, लेकिन आप IE6 में इसे काम करने के लिए CSS3PIE का उपयोग कर सकते हैं जिसमें IE6 शामिल है: css3pie.com

— सरफराज

चेतावनी: यदि आप चूक करते हैं border-collapse: separate;तो यह काम नहीं करेगा।

— केविन बॉर्डर्स

@ केविन बॉर्डर्स गलत है, कम से कम क्रोम v39 में। मुझे यह काम करने में समस्या हो रही थी जब मैंने पृष्ठभूमि-रंग को टेबल पर ही लागू किया था। जाहिरा तौर पर यह tr या td तत्वों पर होना चाहिए।

— बिग मैकलर्जाहेग

separateक्रोम 44 के लिए आवश्यक है।

— ह्यूग गाइनी

Answer 2

पंक्तियों के बीच वास्तविक रिक्ति

यह एक पुराना धागा है, लेकिन मैंने अन्य उत्तरों पर ओपी की टिप्पणियों को पढ़ते हुए देखा कि मूल लक्ष्य स्पष्ट रूप से border-radiusपंक्तियों के बीच में था , और पंक्तियों के बीच अंतराल । ऐसा नहीं लगता है कि वर्तमान समाधान वास्तव में ऐसा करते हैं। थेज़रशैडो का जवाब सही दिशा में चल रहा है, लेकिन इसके लिए थोड़ा और अधिक की आवश्यकता है।

ऐसे में रुचि रखने वालों के लिए, यहां एक ऐसी पहेली है जो पंक्तियों को अलग करती है और प्रत्येक पंक्ति में त्रिज्या को लागू करती है। (नोट: फ़ायरफ़ॉक्स में वर्तमान में background-colorसीमा त्रिज्या पर प्रदर्शित / कतरन करने के लिए एक बग है ।)

कोड इस प्रकार है (और जैसा कि थिसॉरसैडो ने नोट किया है, पहले के ब्राउज़र समर्थन के लिए, विभिन्न विक्रेताओं को border-radiusजरूरत के लिए उपसर्ग जोड़ा गया है)।

table { 
    border-collapse: separate; 
    border-spacing: 0 10px; 
    margin-top: -10px; /* correct offset on first border spacing if desired */
}
td {
    border: solid 1px #000;
    border-style: solid none;
    padding: 10px;
    background-color: cyan;
}
td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px;
}
td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px; 
    border-top-right-radius: 10px; 
}

Comments

ऊपर दिए गए जवाब से बेहतर है।

— निर्गमन

Answer 3

बोनस की जानकारी: के border-radiusसाथ border-collapse: collapse;सीमा पर सेट और सीमा पर कोई प्रभाव नहीं है td। और इससे कोई फर्क नहीं पड़ता कि border-radiusक्या सेट किया गया है table, trया tdइसे अनदेखा किया गया है।

http://jsfiddle.net/Exe3g/

Comments

Jsfield में फ़ायरफ़ॉक्स पर गोल कोने हैं।

— जुक्का के। कोर्पेला

@ JukkaK.Korpela हां, यदि सीमा-पतन: पतन; सेट नहीं है, टॉगल बटन पर क्लिक करें और देखें कि जादू हुआ है।

— रोनी एगरिस पर्सन

Answer 4

त्रि तत्व सीमा-त्रिज्या का सम्मान करता है। शुद्ध html और css का उपयोग कर सकते हैं, कोई जावास्क्रिप्ट नहीं।

JSFiddle लिंक: http://jsfiddle.net/pflies/zL08hqp1/10/

tr {
    border: 0;
    display: block;
    margin: 5px;
}
.solid {
    border: 2px red solid;
    border-radius: 10px;
}
.dotted {
    border: 2px green dotted;
    border-radius: 10px;
}
.dashed {
    border: 2px blue dashed;
    border-radius: 10px;
}

td {
    padding: 5px;
}

<table>
    <tr>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
    </tr>
    <tr class='dotted'>
        <td>07</td>
        <td>08</td>
        <td>09</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr class='solid'>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
    </tr>
    <tr class='dotted'>
        <td>19</td>
        <td>20</td>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
    </tr>
    <tr class='dashed'>
        <td>25</td>
        <td>26</td>
        <td>27</td>
        <td>28</td>
        <td>29</td>
        <td>30</td>
    </tr>
</table>

Comments

टीआर की प्रदर्शन संपत्ति को "ब्लॉक" में बदलना सबसे अधिक संभावना तालिका के लेआउट को गड़बड़ कर देगा। विशेष रूप से, यदि आपकी तालिका में विभिन्न सामग्री लंबाई वाली कई पंक्तियाँ हैं, तो तालिका कोशिकाएँ संरेखित नहीं होंगी।

— जेस

Answer 5

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

इसके बजाय, आप पहले टीडी के दो बाएं कोने और पिछले एक के दो दाहिने कोनों को एक सीमा त्रिज्या दे सकते हैं। आप उपयोग कर सकते हैं first-childऔर last-childचयनकर्ताओं के रूप में theazureshadow ने सुझाव दिया है, लेकिन इन खराब IE के पुराने संस्करणों के द्वारा समर्थित किया जा सकता है। केवल इस तरह के रूप में .first-columnऔर .last-columnइस उद्देश्य की सेवा के लिए वर्गों को परिभाषित करना आसान हो सकता है ।

Comments

मैं सीमा को ध्वस्त करता हूं, इसलिए tr मुझे दी गई शैली प्रदर्शित कर सकता है। मैं वर्ग विधि का प्रयास करूँगा। लेकिन मार्जिन के बारे में क्या? मैंने पंक्तियों के बीच मार्जिन प्रदर्शित करने के लिए बॉर्डर-स्पेसिंग का उपयोग करने की कोशिश की, लेकिन ऐसा करने का सबसे अच्छा तरीका नहीं है, मुझे विश्वास है ....

— हेंसन

यदि वे एक सीमा साझा करते हैं तो पंक्तियों के बीच कोई मार्जिन नहीं हो सकता है - जब सीमा ढह जाती है। मैं मान रहा हूं कि आप जो करने की कोशिश कर रहे हैं वह गोल कोनों के साथ पृष्ठभूमि का रंग पाने के लिए आपकी टीआरएस है? यदि हां, तो अन-टूट उन्हें काम करना चाहिए

— levik

वास्तव में अधिक दबाने वाला मामला सीमाओं के साथ पंक्तियों के बीच मार्जिन को प्रदर्शित करना है। बॉर्डर के लिए जरूरी नहीं कि गोल कोने हों

— हेंसन

Answer 6

ओपेरा के अनुसार CSS3 मानक border-radiusTD पर उपयोग को परिभाषित नहीं करता है । मेरा अनुभव है कि फ़ायरफ़ॉक्स और क्रोम इसका समर्थन करते हैं, लेकिन ओपेरा (आईई के बारे में नहीं जानता)। वर्कअराउंड में td कंटेंट को div में लपेटना है और उसके बाद div पर अप्लाई करना border-radiusहै।

Answer 7

यहां कोई क्रेडिट लेने की कोशिश नहीं की जा रही है, सारा क्रेडिट उनके जवाब के लिए @theazureshadow को जाता है, लेकिन मुझे व्यक्तिगत रूप से इसे एक तालिका के लिए अनुकूलित करना पड़ा, जिसमें इसके <th>बजाय <td>पहली पंक्ति की कोशिकाएं हैं।

मैं यहाँ केवल संशोधित संस्करण पोस्ट कर रहा हूँ अगर आप में से कुछ @ theazureshadow के समाधान का उपयोग करना चाहते हैं, लेकिन मेरी तरह, पहले में कुछ <th>है <tr>। वर्ग "रिपोर्टटेबल" को केवल टेबल पर ही लागू किया जाना है:

table.reportTable {
    border-collapse: separate;
    border-spacing: 0;
}

table.reportTable td {
    border: solid gray 1px;
    border-style: solid none none solid;
    padding: 10px;
}

table.reportTable td:last-child {
    border-right: solid gray 1px;
}

table.reportTable tr:last-child td{
    border-bottom: solid gray 1px;
}

table.reportTable th{
    border: solid gray 1px;
    border-style: solid none none solid;
    padding: 10px;
}

table.reportTable th:last-child{
    border-right: solid gray 1px;
    border-top-right-radius: 10px;
}

table.reportTable th:first-child{
    border-top-left-radius: 10px;
}

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

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

अपनी आवश्यकताओं को पूरा करने के लिए पैडिंग, त्रिज्या आदि को समायोजित करने के लिए स्वतंत्र महसूस करें। आशा है कि लोगों की मदद करता है!

Answer 8

मैंने पाया कि क्रोम, एफएफ और आईई के नवीनतम संस्करणों में सीमा-त्रिज्या को टेबल, टीआरएस और टीडीएस में जोड़ना 100% काम नहीं करता है। इसके बजाय मैं क्या कर रहा हूं, मैं मेज को एक डिव के साथ लपेटता हूं और उस पर सीमा-त्रिज्या डाल देता हूं।

<div class="tableWrapper">
  <table>
    <tr><td>Content</td></tr>
  <table>
</div>

.tableWrapper {
  border-radius: 4px;
  overflow: hidden;
}

यदि आपकी तालिका नहीं है width: 100%, तो आप अपना रैपर बना सकते हैं float: left, बस इसे खाली करना याद रखें।

Comments

सरल और सुरुचिपूर्ण समाधान

— ufk

Answer 9

सीमा-पतन का उपयोग करें: अलग करना; और सीमा-रिक्ति: 0; लेकिन केवल td के लिए बॉर्डर-राइट और बॉर्डर-बॉटम का उपयोग करते हैं, बॉर्डर-टॉप पर लागू होता है और बॉर्डर-लेफ्ट केवल tr td: nth-child (1) पर लागू होता है।

फिर आप कोने की tds पर बॉर्डर त्रिज्या लगा सकते हैं (उन्हें खोजने के लिए nth-child का उपयोग करते हुए)

https://jsfiddle.net/j4wm1f29/

<table>
  <tr>
    <th>title 1</th>
    <th>title 2</th>
    <th>title 3</th>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
</table>

table {
  border-collapse: seperate;
  border-spacing: 0;
}

tr th,
tr td {
  padding: 20px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

tr th {
  border-top: 1px solid #000;
}

tr td:nth-child(1),
tr th:nth-child(1) {
  border-left: 1px solid #000;
}

/* border radius */
tr th:nth-child(1) {
  border-radius: 10px 0 0 0;
}

tr th:nth-last-child(1) {
  border-radius: 0 10px 0 0;
}

tr:nth-last-child(1) td:nth-child(1) {
  border-radius: 0 0 0 10px;
}

tr:nth-last-child(1) td:nth-last-child(1) {
  border-radius: 0 0 10px 0;
}

Answer 10

या तालिका-छाया का उपयोग करें यदि तालिका का पतन होता है

Answer 11

सभी उत्तर बहुत लंबे हैं। सीमा त्रिज्या को तालिका तत्व में जोड़ने का सबसे आसान तरीका जो सीमा को संपत्ति के रूप में स्वीकार करता है, सीमा त्रिज्या को अतिप्रवाह के साथ कर रहा है: छिपा हुआ।

border: xStyle xColor xSize;
border-collapse: collapse;
border-radius: 1em;
overflow: hidden;

Comments

@ypresto #theazureshadow के शीर्ष उत्तर का उल्लेख करता है कि सीमा त्रिज्या त्रि के लिए काम नहीं करती है, लेकिन इसका कारण यह है कि आप इसके लिए एक सीमा भी लागू नहीं कर सकते, लेकिन तालिका काम नहीं करती है :( मुझे नहीं पता कि क्यों लेकिन वह उत्तर 2013 से है ।

— ई एलेक्सिस एमटी