উত্তর:
আপনি কেবল টিডি-তে সীমানা-ব্যাসার্ধ প্রয়োগ করতে পারেন, টিআর বা সারণীতে নয়। আমি এই স্টাইলগুলি ব্যবহার করে বৃত্তাকার কোণার টেবিলগুলির জন্য এটি প্রায় পেয়েছি:
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; }সমস্ত বিক্রেতা উপসর্গ প্রদান নিশ্চিত করুন। কর্মক্ষেত্রে এটির উদাহরণ এখানে ।
border-collapse: separate;তবে এটি কাজ করবে না।
separateক্রোম 44 এর জন্য প্রয়োজন
এটি একটি পুরানো থ্রেড, তবে আমি অন্যান্য উত্তরে ওপির মন্তব্যগুলি পড়তে লক্ষ্য করেছি যে আসল লক্ষ্যটি স্পষ্টতই border-radiusসারিগুলিতে ছিল এবং এর মধ্যে ফাঁক রয়েছে । বর্তমান সমাধানগুলি ঠিক এটি করে বলে মনে হয় না। theazureshadow- এর উত্তরটি সঠিক দিকে চলেছে তবে মনে হচ্ছে আরও কিছুটা দরকার।
যারা আগ্রহী তাদের জন্য, এখানে একটি ঝাঁকুনি যা সারিগুলি পৃথক করে এবং প্রতিটি সারিতে ব্যাসার্ধ প্রয়োগ করে। (দ্রষ্টব্য: সীমান্ত রেডিয়ায় ফায়ারফক্সের প্রদর্শন / ক্লিপিংয়ের ক্ষেত্রে একটি বাগ রয়েছে hasbackground-color )
কোডটি নিম্নরূপ (এবং theazureshadow হিসাবে উল্লেখ করা হয়েছে, পূর্ববর্তী ব্রাউজার সমর্থনের জন্য, 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;
}বোনাস তথ্য: border-radiusএর সাথে সারণী border-collapse: collapse;এবং সীমান্ত সেট করার উপর কোনও প্রভাব ফেলেনি td। আর এটা কোন ব্যাপার না যদি border-radiusসেট করা হয় table, trঅথবা td-এটা উপেক্ষীত।
ত্রি উপাদান সীমানা ব্যাসার্ধকে সম্মান করে। খাঁটি এইচটিএমএল এবং সিএসএস ব্যবহার করতে পারে, কোনও জাভাস্ক্রিপ্ট নেই।
জেএসফিডেল লিঙ্ক: 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>আমি মনে করি আপনার ক্ষেত্রে সীমানা ভেঙে ফেলা ভুল কাজ thing এগুলি ভেঙে যাওয়ার অর্থ হ'ল দুটি প্রতিবেশী কক্ষের মধ্যে সীমানা ভাগ হয়ে যায়। এর অর্থ এটি ব্যাসার্ধের সাহায্যে কোন দিকে বাঁকানো উচিত তা স্পষ্ট নয়।
পরিবর্তে, আপনি প্রথম টিডির দুটি বামদিকে এবং শেষের দুটি ডান হাতের কোণে একটি সীমানা ব্যাসার্ধ দিতে পারেন। তুমি ব্যবহার করতে পারfirst-child এবং last-childনির্বাচকরা যেমন theazureshadow দ্বারা প্রস্তাবিত, কিন্তু এই দুর্বল অর্থাত্ পুরোনো সংস্করণগুলি দ্বারা সমর্থিত হতে পারে। এটা ঠিক যেমন ক্লাস, সংজ্ঞায়িত করা আরো সহজ হতে পারে .first-columnএবং .last-columnএই উদ্দেশ্যে পরিবেশন করা।
এখানে কোনও ক্রেডিট নেওয়ার চেষ্টা না করে, সমস্ত ক্রেডিট তার উত্তরের জন্য @ থিয়েজারস্যাডোতে যায়, তবে ব্যক্তিগতভাবে আমি এটির <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;
}আপনার প্রয়োজনীয়তা মাপসই প্যাডিংস, রেডিওস, ইত্যাদি সামঞ্জস্য করুন নির্দ্বিধায়। আশা করি মানুষকে সাহায্য করবে!
আমি দেখতে পেয়েছি যে টেবিল, টিআরএস এবং টিডিএসে সীমানা-ব্যাসার্ধ যুক্ত করা Chrome, FF এবং IE এর সর্বশেষতম সংস্করণগুলিতে 100% কাজ করে না বলে মনে হয়। পরিবর্তে আমি যা করি তা হ'ল, আমি একটি ডিভ দিয়ে টেবিলটি জড়িয়ে রাখি এবং এটিতে সীমানা-ব্যাসার্ধ রাখি।
<div class="tableWrapper">
<table>
<tr><td>Content</td></tr>
<table>
</div>
.tableWrapper {
border-radius: 4px;
overflow: hidden;
}যদি আপনার টেবিলটি না থাকে তবে width: 100%আপনি আপনার মোড়ক তৈরি করতে পারেন float: left, এটি পরিষ্কার করার জন্য কেবল মনে রাখবেন।
সীমান্ত-পতন ব্যবহার করুন: পৃথক; এবং সীমানা-ব্যবধান: 0; তবে টিডিএসের জন্য কেবল বর্ডার-ডান এবং সীমানা-নীচের অংশটি ব্যবহার করুন, বর্ডার-টপ প্রয়োগ করা হবে th এবং বর্ডার-বামে কেবল টিআরডি তে প্রয়োগ করা হবে: নবম-সন্তানের (1)।
তারপরে আপনি কোণার টিডিতে সীমানা ব্যাসার্ধ প্রয়োগ করতে পারেন (তাদের সন্ধানের জন্য নবম-শিশু ব্যবহার করে)
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;
}সমস্ত উত্তর বেশ দীর্ঘ। সারণী উপাদানকে সীমানা ব্যাসার্ধ যুক্ত করার সহজতম উপায় যা সীমানাকে সম্পত্তি হিসাবে গ্রহণ করে, ওভারফ্লো: গোপন সহ সীমানা ব্যাসার্ধ করছে।
border: xStyle xColor xSize;
border-collapse: collapse;
border-radius: 1em;
overflow: hidden;