राउंड टेबल कॉर्नर केवल सीएसएस

Question

मैंने खोजा और खोजा है, लेकिन अपनी आवश्यकता का हल नहीं खोज पाया।

मेरे पास एक सादे ol 'HTML तालिका है। मैं इसके लिए गोल कोनों चाहता हूं, बिना छवियों या जेएस, अर्थात शुद्ध सीएसएस का उपयोग किए बिना । इस कदर:

कोने की कोशिकाओं के लिए गोल कोनों, और 1pxकोशिकाओं के लिए मोटी सीमा।

अब तक मेरे पास यह है:

table {
  -moz-border-radius: 5px !important;
  border-collapse: collapse !important;
  border: none !important;
}
table th,
table td {
  border: none !important
}
table th:first-child {
  -moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
  -moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
  -moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
  background-color: #ddd !important
}

लेकिन यह मुझे कोशिकाओं के लिए किसी भी सीमा के बिना छोड़ देता है। यदि मैं सीमाएँ जोड़ता हूँ, तो वे गोल नहीं हैं!

कोई उपाय?

Comments

क्या आपने moz-border-radius का उपयोग करके TD तत्वों में सीमा जोड़ने की कोशिश की है? यह भी ध्यान रखें कि यह IE में काम नहीं करेगा, IE अभी भी सीधे किनारों को दिखाएगा।

— फरमान

उत्तरों और आपकी टिप्पणियों को देखते हुए, यह स्पष्ट नहीं है कि आप क्या चाहते हैं: आप गोल कोनों को कहाँ चाहते हैं? टेबल, टेबल सेल, आपकी टेबल के कोनों पर केवल सेल?

— BiiiB

मुझे लगता है कि यह प्रश्न शीर्षक, तालिका कोनों

— विशाल शाह

@VishalShah +1 वास्तव में उपयोगी प्रश्न के लिए। मैं नेत्रहीन रूप से UI विजेट्स के लिए डिज़ाइन किए गए jQuery UI गोल कोने वाले वर्ग का उपयोग कर रहा था, लेकिन मैंने इसे टेबल तत्वों पर लागू किया और सब कुछ चौकोर हो गया। इसलिए अब मैं टेबल आधारित विजेट के साथ अपने jQuery यूआई विषय का उपयोग कर सकता हूं।

— डेविडहोगो सेप

Answer 1

अलग-अलग सीमाओं के साथ एफएफ और क्रोम (किसी भी अन्य का परीक्षण नहीं किया गया) में ठीक काम करने लगता है: http://jsfiddle.net/7veZQ/3/

संपादित करें: यहां आपके स्केच का अपेक्षाकृत स्वच्छ कार्यान्वयन है:

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
    -moz-border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    background-color: blue;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}

<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>

http://jsfiddle.net/MuZzz/3577/

Comments

बिल्कुल नहीं मैं क्या देख रहा हूँ। यदि आप टेबल पैडिंग को हटाते हैं और केवल कोने की कोशिकाओं में बॉर्डर-त्रिज्या लगाते हैं, तो आपको 2px मोटी सीमाएँ मिलती हैं, जो कि बदसूरत है। बल्कि इसकी कोई सीमा नहीं है।

— विशाल शाह

बंद करे। कोने की कोशिकाओं को सीमा त्रिज्या की भी जरूरत थी। jsfiddle.net/JWb4T/1 हालांकि अब आपको कोने की कोशिकाओं के किनारे और मेज के किनारे के बीच थोड़ा अंतर दिखाई देता है। कोने की कोशिकाओं के लिए सीमा त्रिज्या को कम करके तय किया जा सकता है। साभार: D

— विशाल शाह

खुशी है कि तुम्हें इसका हल मिल गया। ध्यान दें कि first-childऔर last-childIE6 / 7/8 में काम नहीं है, लेकिन आप के लिए कोई समस्या नहीं रह न करता के बाद से border-radius। इसका मतलब है कि आप इसे IE में ठीक करने के लिए CSS3Pie का उपयोग नहीं कर पाएंगे - यह सीमा-त्रिज्या को ठीक करेगा, लेकिन पहले / अंतिम-बच्चे को नहीं।

— स्पडली

border-collapse: separate;Zurb इंक टेम्पलेट में जोड़ना मेरे लिए इसे हल करता है।

— जोहान डेटमर

शायद यह 7 साल पहले अच्छा लग रहा था, लेकिन आज सेल बॉर्डर इस समाधान का उपयोग करके कनेक्ट नहीं होता है इसलिए यह भयानक लग रहा है।

— 14

Answer 2

मेरे लिए, ट्विटर बूटस्ट्रैप समाधान अच्छा लग रहा है। यह IE <9 (IE 8 और निम्न में कोई गोल कोनों) को बाहर नहीं करता है, लेकिन यह ठीक है मुझे लगता है, अगर आप भावी वेब-ऐप विकसित करते हैं।

सीएसएस / HTML:

table { 
    border: 1px solid #ddd;
    border-collapse: separate;
    border-left: 0;
    border-radius: 4px;
    border-spacing: 0px;
}
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    border-collapse: separate;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
th, td {
    padding: 5px 4px 6px 4px; 
    text-align: left;
    vertical-align: top;
    border-left: 1px solid #ddd;    
}
td {
    border-top: 1px solid #ddd;    
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
    border-radius: 4px 0 0 0;
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 4px;
}

<table>
  <thead>
    <tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
  </thead>
  <tbody>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
  </tbody>
</table>

आप यहां (jsFiddle पर) उसके साथ खेल सकते हैं

Answer 3

सबसे पहले, आपको -moz-border-radiusसभी ब्राउज़रों का समर्थन करने की आवश्यकता है। आपको सभी प्रकारों को निर्दिष्ट करना चाहिए, जिसमें सादा शामिल है border-radius, निम्नानुसार है:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

दूसरे, सीधे अपने प्रश्न का उत्तर देने के लिए, border-radiusवास्तव में एक सीमा प्रदर्शित नहीं करता है; यह सिर्फ यह निर्धारित करता है कि सीमाएं कैसे दिखती हैं, अगर वहाँ एक है।

सीमा को चालू करने के लिए, और इस तरह अपने गोल कोनों को प्राप्त करें, आपको borderअपने tdऔर thतत्वों पर विशेषता की भी आवश्यकता है ।

td, th {
   border:solid black 1px;
}

यदि आप एक पृष्ठभूमि रंग (या ग्राफिक) है, तो आप गोल कोनों को भी देखेंगे, हालांकि निश्चित रूप से यह गोल कोने के लिए एक सीमा के बिना दिखाई देने के लिए आसपास के तत्व के लिए एक अलग पृष्ठभूमि का रंग होना चाहिए।

यह ध्यान देने योग्य है कि कुछ पुराने ब्राउज़र border-radiusटेबल / टेबल सेल्स पर लगाना पसंद नहीं करते हैं। यह <div>प्रत्येक सेल के अंदर रखने और इसके बजाय स्टाइल करने के लायक हो सकता है । हालांकि यह किसी भी ब्राउज़र के वर्तमान संस्करणों को प्रभावित नहीं करना चाहिए (IE को छोड़कर, जो गोल कोनों का समर्थन नहीं करता है - नीचे देखें)

अंत में, ऐसा नहीं है कि IE बिल्कुल समर्थन नहीं करता है border-radius(IE9 बीटा करता है, लेकिन अधिकांश IE उपयोगकर्ता IE8 या उससे कम पर होंगे)। यदि आप आईई को सीमा-त्रिज्या का समर्थन करने के लिए हैक करना चाहते हैं, तो http://css3pie.com/ देखें

[संपादित करें]

ठीक है, यह मुझे गुस्सा दिला रहा था, इसलिए मैंने कुछ परीक्षण किया है।

यहाँ एक JSField उदाहरण है जिसके साथ मैं खेल रहा हूँ

ऐसा लगता है कि आप जिस महत्वपूर्ण चीज़ को याद कर रहे थे, border-collapse:separate;वह टेबल एलीमेंट पर थी । यह कोशिकाओं को अपनी सीमाओं को एक साथ जोड़ने से रोकता है, जो उन्हें सीमा त्रिज्या लेने की अनुमति देता है।

उम्मीद है की वो मदद करदे।

Comments

कोड को न्यूनतम रखने के लिए, मैंने क्रॉस-ब्राउज़र सामान को छोड़ दिया है। अगर मैं td और th को बॉर्डर देता हूं, तो वे गोल नहीं होते। मुझे सीधे किनारे मिलते हैं। एक टेबल के लिए सैंपल सीएसएस कोड दे सकता है, जिस पर कोई सीएसएस लागू नहीं होता है, जो यह दर्शाता है कि आप क्या कह रहे हैं।

— विशाल शाह

@ वीशाल शाह - मैंने कुछ परीक्षण करने के बाद अपना जवाब अपडेट किया है। उम्मीद है की वो मदद करदे।

— स्पडली

आपका उदाहरण सभी कक्षों के लिए एक सीमा त्रिज्या प्रदर्शित करता है , जहां मैं केवल कोने की कोशिकाओं के लिए चाहता हूं। यह वही है जो मैं ढूंढ रहा था: jsfiddle.net/JWb4T/1

— विशाल शाह

@ वीशाल शाह - मैंने समस्या को समझा कि टेबल पर कहीं भी गोलाई की कमी है, बजाय इसके कि विशेष रूप से टेबल के किन बिट्स को गोल किया जाए। खुशी है कि आप इसे अंत में हल कर लेते हैं (ऐसा लगता है कि border-collapse:separate;टिप अंत में उपयोगी थी)

— स्पडली

उस सीमा-पतन के लिए +1: अलग-अलग टिप। इससे मुझे बहुत मदद मिली।

— डेविडहायो

Answer 4

चयनित उत्तर भयानक है। मैं इसे कोने की तालिका कोशिकाओं को लक्षित करके और इसी सीमा त्रिज्या को लागू करके लागू करूंगा।

शीर्ष कोनों को प्राप्त करने के लिए, वें त्रिज्या के पहले और अंतिम प्रकार पर सीमा त्रिज्या सेट करें , फिर नीचे के कोनों को प्राप्त करने के लिए टाइप त्र के अंतिम पर td प्रकार के अंतिम और पहले पर सीमा त्रिज्या सेट करके समाप्त करें ।

th:first-of-type {
  border-top-left-radius: 10px;
}
th:last-of-type {
  border-top-right-radius: 10px;
}
tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}

Comments

यह अन्य सभी उत्तरों की तुलना में बहुत बेहतर है ... यह आश्चर्यजनक सरल और सुरुचिपूर्ण है!

— एरिक कोटे

मैं खुशी से मदद कर सकता है!

— ल्यूक फ्लौरनॉय

यह वास्तव में अच्छी तरह से काम करता है, लेकिन मेरे पास तालिका thके शीर्ष और बाईं ओर तत्वों के साथ एक और तालिका है और यह उसके लिए काम नहीं करता है। मैं उस प्रकार के टेबल के कोनों को गोल कैसे कर सकता हूं?

— नेनूर

Answer 5

आईई 9 के लिए गोल कोनों और अन्य CSS3 के व्यवहार के लिए मैंने जो सबसे अच्छा समाधान पाया है वह यहां पाया जा सकता है: http://css3pie.com/

प्लग-इन डाउनलोड करें, अपने समाधान संरचना में एक निर्देशिका की प्रतिलिपि बनाएँ। फिर अपनी स्टाइलशीट में यह सुनिश्चित करें कि व्यवहार का टैग ऐसा हो कि वह प्लग-इन में खिंच जाए।

मेरी परियोजना से सरल उदाहरण जो मुझे अपनी मेज के लिए गोल कोने, रंग ढाल और बॉक्स छाया देता है:

.table-canvas 
{
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    overflow:hidden;
    border-radius: 10px;
    -pie-background: linear-gradient(#ece9d8, #E5ECD8);   
    box-shadow: #666 0px 2px 3px;
    behavior: url(Include/PIE.htc);
    overflow: hidden;
}

चिंता मत करो अगर आपका Visual Studio CSS intellisense आपको अनजान राइट्स के लिए हरी रेखांकित करता है, तो यह तब भी काम करता है जब आप इसे चलाते हैं। कुछ तत्व बहुत स्पष्ट रूप से प्रलेखित नहीं हैं, लेकिन उदाहरण बहुत अच्छे हैं, विशेष रूप से फ्रंट पेज पर।

Answer 6

व्यक्तिगत अनुभव के माध्यम से मैंने पाया है कि यह एक HTML टेबल सेल के कोनों को गोल करना संभव नहीं है शुद्ध सीएसएस के साथ । टेबल की सबसे बाहरी सीमा पर गोलाई संभव है।

आपको इस ट्यूटोरियल में वर्णित छवियों का उपयोग करने का सहारा लेना होगा , या इसी तरह का कोई भी :)

Comments

+1, और यहाँ भी, हाल ही में इसे हासिल करने की कोशिश की गई है, लेकिन कोई किस्मत नहीं। के अंदर रखना था <div>। ^ ^,

— tomsseisums

Answer 7

यह थोड़ा मोटा है, लेकिन यहां कुछ ऐसा है जिसे मैंने पूरी तरह से सीएसएस और एचटीएमएल में समाहित किया है।

• बाहरी कोने गोल
• शीर्ष पंक्ति
• एकाधिक डेटा पंक्तियाँ

यह उदाहरण :hoverप्रत्येक डेटा सेल के लिए छद्म वर्ग का उपयोग भी करता है <td>। अपनी आवश्यकताओं को पूरा करने के लिए तत्वों को आसानी से अपडेट किया जा सकता है, और हॉवर को जल्दी से अक्षम किया जा सकता है।

(हालांकि, मैंने अभी तक :hoverपूर्ण पंक्तियों के लिए ठीक से काम नहीं किया है <tr>। अंतिम होवर वाली पंक्ति नीचे की तरफ गोल कोनों के साथ प्रदर्शित नहीं होती है। मुझे यकीन है कि कुछ सरल है जो अनदेखी हो रही है।)

table.dltrc {
  width: 95%;
  border-collapse: separate;
  border-spacing: 0px;
  border: solid black 2px;
  border-radius: 8px;
}

tr.dlheader {
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  padding: 2px
}

td.dlheader {
  background: #d9d9d9;
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  border-radius: 0px;
  padding: 2px
}

tr.dlinfo,
td.dlinfo {
  text-align: center;
  border-left: solid black 1px;
  border-top: solid black 1px;
  padding: 2px
}

td.dlinfo:first-child,
td.dlheader:first-child {
  border-left: none;
}

td.dlheader:first-child {
  border-radius: 5px 0 0 0;
}

td.dlheader:last-child {
  border-radius: 0 5px 0 0;
}


/*===== hover effects =====*/


/*tr.hover01:hover,
tr.hover02:hover {
  background-color: #dde6ee;
}*/


/* === ROW HOVER === */


/*tr.hover02:hover:last-child {
  background-color: #dde6ee;
  border-radius: 0 0 6px 6px;
  }*/


/* === CELL HOVER === */

td.hover01:hover {
  background-color: #dde6ee;
}

td.hover02:hover {
  background-color: #dde6ee;
}

td.hover02:first-child {
  border-radius: 0 0 0 6px;
}

td.hover02:last-child {
  border-radius: 0 0 6px 0;
}

<body style="background:white">
  <br>
  <center>
    <table class="dltrc" style="background:none">
      <tbody>
        <tr class="dlheader">
          <td class="dlheader">Subject</td>
          <td class="dlheader">Title</td>
          <td class="dlheader">Format</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">One</td>
          <td class="dlinfo hover01">Two</td>
          <td class="dlinfo hover01">Three</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Four</td>
          <td class="dlinfo hover01">Five</td>
          <td class="dlinfo hover01">Six</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Seven</td>
          <td class="dlinfo hover01">Eight</td>
          <td class="dlinfo hover01">Nine</td>
        </tr>
        <tr class="dlinfo2 hover02">
          <td class="dlinfo hover02">Ten</td>
          <td class="dlinfo hover01">Eleven</td>
          <td class="dlinfo hover02">Twelve</td>
        </tr>
      </tbody>
    </table>
  </center>
</body>

Comments

यह स्वीकृत उत्तर होना चाहिए। धन्यवाद!

— अवतार लें

Answer 8

<div>तालिका के चारों ओर एक आवरण जोड़ें , और निम्नलिखित सीएसएस लागू करें

border-radius: x px;
overflow: hidden;
display: inline-block;

इस आवरण के लिए।

Answer 9

@Luke flournoy के शानदार उत्तर को अनुकूलित करने के लिए - और यदि आप thअपनी तालिका में उपयोग नहीं कर रहे हैं , तो यहां सभी CSS आपको एक गोल तालिका बनाने की आवश्यकता है:

.my_table{
border-collapse: separate;
border-spacing: 0;
border: 1px solid grey;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.my_table tr:first-of-type {
  border-top-left-radius: 10px;
}

.my_table tr:first-of-type td:last-of-type {
  border-top-right-radius: 10px;
}

.my_table tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}

.my_table tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}

Answer 10

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

आप का उपयोग करते हैं 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 11

आप इसे आज़मा सकते हैं यदि आप कक्षों को स्पर्श किए बिना तालिका के प्रत्येक तरफ गोल कोनों चाहते हैं: http://jsfiddle.net/7veZQ/3983/

<table>
    <tr class="first-line"><td>A</td><td>B</td></tr>
    <tr class="last-line"><td>C</td><td>D</td></tr>
</table>

Answer 12

नमूना HTML

<table class="round-corner" aria-describedby="caption">
    <caption id="caption">Table with rounded corners</caption>
    <thead>
        <tr>
            <th scope="col">Head1</th>
            <th scope="col">Head2</th>
            <th scope="col">Head3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
        </tr>
    </tfoot>
</table>

SCSS, आसानी से CSS में परिवर्तित हो गया, sassmeister.com का उपयोग करें

// General CSS
table,
th,
td {
    border: 1px solid #000;
    padding: 8px 12px;
}

.round-corner {
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 1px #000; // fake "border"
    border-radius: 4px;

    // Maybe there's no THEAD after the caption?
    caption + tbody {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:first-child {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:last-child {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    thead {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tfoot {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    // Reset tables inside table
    table tr th,
    table tr td {
        border-radius: 0;
    }
}

http://jsfiddle.net/MuTLY/xqrgo466/

Answer 13

निम्नलिखित कुछ ऐसा है जो मैंने उपयोग किया है जो मेरे लिए ब्राउज़रों में काम करता है इसलिए मुझे आशा है कि यह भविष्य में किसी की मदद करता है:

#contentblock th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 6px 0 0 0;
}

#contentblock th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 6px 0 0;
}
#contentblock tr:last-child td:last-child {
     border-radius: 0 0 6px 0;
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 6px 0;
 }

#contentblock tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 0 6px;
}

जाहिर है कि #contentblockभाग को आवश्यकतानुसार बदला जा सकता है / संपादित किया जा सकता है और आप border-radius.htcGoogle या अपने पसंदीदा वेब ब्राउज़र में खोज कर फ़ाइल पा सकते हैं ।

Answer 14

यह css3हाल ही में गैर-IE <9 ब्राउज़र का समर्थन करेगा।

की जाँच करें यहाँ है, यह सभी उपलब्ध ब्राउज़रों के लिए दौर संपत्ति निकला

Comments

css3please IE में सीमा-त्रिज्या के लिए कुछ भी नहीं करता है। यदि आप आईई को सीमा-त्रिज्या का समर्थन करने के लिए हैक करना चाहते हैं, तो css3pie.com

— Spudley

मैं विशेष रूप से किसी तालिका के लिए गोल संपत्ति की बात कर रहा हूं, किसी अन्य तत्व की नहीं।

— विशाल शाह

Answer 15

<head>टैग के बीच जोड़ें :

<style>
  td {background: #ffddaa; width: 20%;}
</style>

और शरीर में:

<div style="background: black; border-radius: 12px;">
  <table width="100%" style="cell-spacing: 1px;">
    <tr>
      <td style="border-top-left-radius: 10px;">
        Noordwest
      </td>
      <td>&nbsp;</td>
      <td>Noord</td>
      <td>&nbsp;</td>
      <td style="border-top-right-radius: 10px;">
        Noordoost
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>West</td>
      <td>&nbsp;</td>
      <td>Centrum</td>
      <td>&nbsp;</td>
      <td>Oost</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td style="border-bottom-left-radius: 10px;">
        Zuidwest
      </td>
      <td>&nbsp;</td>
      <td>Zuid</td>
      <td>&nbsp;</td>
      <td style="border-bottom-right-radius: 10px;">
        Zuidoost
      </td>
    </tr>
  </table>
</div>

उदाहरण के लिए सेल रंग, सामग्री और स्वरूपण निश्चित रूप से हैं;
यह एक div के भीतर रंग से भरा कोशिकाओं रिक्ति के बारे में है। ऐसा करने पर, ब्लैक सेल बॉर्डर / टेबल बॉर्डर वास्तव में डिव बैकग्राउंड कलर है।
ध्यान दें कि आपको एक चिकनी गोल कोने प्रभाव लेने के लिए अलग-अलग सेल कोने बॉर्डर रेडी से अधिक 2 मानों के बारे में दिव्य-सीमा-त्रिज्या सेट करने की आवश्यकता होगी।

Answer 16

टेबल बॉर्डर में पाठ ...

नोट: नीचे HTML / CSS कोड IE में ही देखा जाना चाहिए। Chrome में कोड सही तरीके से प्रस्तुत नहीं किया जाएगा!

हमें यह याद रखना चाहिए:

1. एक टेबल की एक सीमा होती है: इसकी बाहरी सीमा (जिसमें सीमा-त्रिज्या भी हो सकती है।)

2. स्वयं ALSO की सीमाएँ भी (जो भी हो, सीमा-त्रिज्या हो सकती है)।

3. टेबल और सेल बॉर्डर एक दूसरे के साथ हस्तक्षेप कर सकते हैं:

   सेल बॉर्डर टेबल बॉर्डर (यानी: टेबल बाउंड्री) के माध्यम से छेद कर सकता है।

   इस प्रभाव को देखने के लिए, नीचे दिए गए कोड में CSS स्टाइल नियमों में संशोधन करें:
   i। तालिका {सीमा-पतन: अलग;}
   ii। शैली के नियमों को हटा दें जो तालिका के कोने की कोशिकाओं को गोल करते हैं।
   iii। फिर सीमा-रिक्ति के साथ खेलते हैं ताकि आप हस्तक्षेप देख सकें।

4. हालाँकि, टेबल बॉर्डर और सेल बॉर्डर COLLAPSED हो सकता है (उपयोग: बॉर्डर-पतन: पतन;)।

5. जब वे ढह जाते हैं, तो सेल और टेबल बॉर्डर एक अलग तरीके से हस्तक्षेप करते हैं:

   मैं। यदि टेबल बॉर्डर गोल है, लेकिन सेल बॉर्डर चौकोर है, तो सेल का आकार पूर्वता लेता है और टेबल अपने घुमावदार कोनों को खो देता है।

   ii। इसके विपरीत, यदि कोने की कोशिका वक्रित है लेकिन तालिका सीमा वर्गाकार है, तो आप कोने के कक्षों की वक्रता को देखते हुए एक बदसूरत वर्ग कोना देखेंगे।

6. यह देखते हुए कि सेल की विशेषता पूर्वता लेती है, तालिका के चार कोनों को गोल करने का तरीका निम्नानुसार है:

   मैं। तालिका पर सीमाएँ ढहना (उपयोग करना: सीमा-पतन: पतन;)।

   ii। तालिका के कोने की कोशिकाओं पर अपना वांछित वक्रता स्थापित करना।
   iii। इससे कोई फर्क नहीं पड़ता कि तालिका के कोने गोल हैं (यानी: इसकी सीमा-त्रिज्या शून्य हो सकती है)।

			.zui-table-rounded {
				border: 2px solid blue;
				/*border-radius: 20px;*/
				
				border-collapse: collapse;
				border-spacing: 0px;
			}
						
			.zui-table-rounded thead th:first-child {
				border-radius: 30px 0 0 0;
			}
			
			.zui-table-rounded thead th:last-child {
				border-radius: 0 10px 0 0;
			}
			
			.zui-table-rounded tbody tr:last-child td:first-child {
				border-radius: 0 0 0 10px;
			}
			
			.zui-table-rounded tbody tr:last-child td:last-child {
				border-radius: 0 0 10px 0;
			}
			
			
			.zui-table-rounded thead th {
				background-color: #CFAD70;
			}
			
			.zui-table-rounded tbody td {
				border-top: solid 1px #957030;
				background-color: #EED592;
			}

			<table class="zui-table-rounded">
			<thead>
				<tr>
					<th>Name</th>
					<th>Position</th>
					<th>Height</th>
					<th>Born</th>
					<th>Salary</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>DeMarcus Cousins</td>
					<td>C</td>
					<td>6'11"</td>
					<td>08-13-1990</td>
					<td>$4,917,000</td>
				</tr>
				<tr>
					<td>Isaiah Thomas</td>
					<td>PG</td>
					<td>5'9"</td>
					<td>02-07-1989</td>
					<td>$473,604</td>
				</tr>
				<tr>
					<td>Ben McLemore</td>
					<td>SG</td>
					<td>6'5"</td>
					<td>02-11-1993</td>
					<td>$2,895,960</td>
				</tr>
				<tr>
					<td>Marcus Thornton</td>
					<td>SG</td>
					<td>6'4"</td>
					<td>05-05-1987</td>
					<td>$7,000,000</td>
				</tr>
				<tr>
					<td>Jason Thompson</td>
					<td>PF</td>
					<td>6'11"</td>
					<td>06-21-1986</td>
					<td>$3,001,000</td>
				</tr>
			</tbody>
		</table>

Answer 17

सीएसएस:

table {
  border: 1px solid black;
  border-radius: 10px;
  border-collapse: collapse;
  overflow: hidden;
}

td {
  padding: 0.5em 1em;
  border: 1px solid black;
}

Comments

कृपया अपने समाधान के बारे में विस्तार से

— बताएं

@ श्रीवत्शंकर मैंने इसे बहुत पहले लिखा था, इसलिए इस -1 को देखते हुए, मुझे लगता है कि यह अब काम नहीं करता है। मेरी बात <टेबल> में "बॉर्डर-त्रिज्या" जोड़ने की थी, और फिर "ओवरफ्लो: हिडन" <td> से बाहरी सीमाओं को छिपाएगा। मैं अनुमान लगा रहा हूं कि आप "बॉर्डर-त्रिज्या", "बॉर्डर" और "अतिप्रवाह: छिपी" को <div> में जोड़ने का प्रयास कर सकते हैं, जो <table> के लिए एक आवरण है, और फिर हर <td> (I) के अंदर सीमाएं जोड़ें बाहरी सीमा के बिना प्रत्येक पंक्ति / स्तंभ का पहला और अंतिम तत्व बनाना होगा, क्योंकि <div> में एक गोल बॉर्डर होगा, जैसे चित्र पर)

— गोरान वासिक

काफी उचित। यह समझ आता है। यह अनुरोधित सटीक परिणाम नहीं देता है, लेकिन मैं आपकी बात देखता हूं। यदि आप अपना उत्तर संपादित कर सकते हैं तो मैं अपना स्कोर संशोधित कर सकता हूं। :-)

— श्रीवत्स