সিএসএস 3 এর সীমানা-ব্যাসার্ধের সম্পত্তি এবং সীমানা-পতন: ধসের মিশ্রণ নেই। বৃত্তাকার কোণগুলির সাথে একটি ধসের টেবিল তৈরি করতে আমি কীভাবে সীমানা-ব্যাসার্ধ ব্যবহার করতে পারি?

317

সম্পাদনা - মূল শিরোনাম: সেখানে অর্জনে একটি বিকল্প উপায় আছে কি border-collapse:collapseমধ্যে CSS(অর্ডার ধসে বৃত্তাকার কোণ টেবিল আছে যাতে)?

যেহেতু দেখা যাচ্ছে যে কেবল টেবিলের সীমানা ধসে পড়লে মূল সমস্যার সমাধান হয় না, তাই আলোচনার আরও ভালভাবে প্রতিফলিত করার জন্য আমি শিরোনাম আপডেট করেছি।

আমিCSS3 border-radius সম্পত্তি ব্যবহার করে বৃত্তাকার কোণে একটি টেবিল তৈরি করার চেষ্টা করছি । আমি যে টেবিল শৈলীগুলি ব্যবহার করছি তা দেখতে এমন কিছু দেখাচ্ছে:

table {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}

সমস্যা এখানে। আমি border-collapse:collapseসম্পত্তিটি সেট করতে চাই এবং যখন সেট করা থাকে তখন border-radiusআর কাজ করে না। কোনও সিএসএস-ভিত্তিক উপায় কি border-collapse:collapseআসলে ব্যবহার না করেই আমি একই প্রভাব পেতে পারি?

সম্পাদনা:

আমি এখানে সমস্যাটি প্রদর্শনের জন্য একটি সাধারণ পৃষ্ঠা তৈরি করেছি (কেবলমাত্র ফায়ারফক্স / সাফারি)।

দেখে মনে হচ্ছে সমস্যার একটি বড় অংশ হ'ল টেবিলটি গোলাকার কোণে স্থাপন করা কোণার tdউপাদানগুলির কোণগুলিকে প্রভাবিত করে না । যদি টেবিলটি সব এক রঙের হয় তবে এটি কোনও সমস্যা হবেনা যেহেতু আমি tdপ্রথম এবং শেষ সারির জন্য যথাক্রমে উপরের এবং নীচের কোণগুলিকে বৃত্তাকার করতে পারি । যাইহোক, আমি শিরোনাম এবং স্ট্রিপিংয়ের জন্য পৃথক করতে টেবিলের জন্য বিভিন্ন ব্যাকগ্রাউন্ড রঙ ব্যবহার করছি, যাতে অভ্যন্তরীণ tdউপাদানগুলিও তাদের বৃত্তাকার কোণগুলি দেখায়।

প্রস্তাবিত সমাধানগুলির সংক্ষিপ্তসার:

গোলাকার কোণগুলির সাথে অন্য একটি উপাদান দিয়ে টেবিলকে ঘিরে কাজ করা কার্যকর হয় না কারণ টেবিলটির বর্গাকার কোণগুলি "রক্তপাত করে।"

সীমানা প্রস্থকে 0 এ নির্দিষ্ট করে টেবিলটি ধসে যাবে না।

tdসেলস্পেসিং শূন্যে সেট করার পরে নীচের কোণগুলি এখনও বর্গাকার।

পরিবর্তে জাভাস্ক্রিপ্ট ব্যবহার করা - সমস্যা এড়িয়ে কাজ করে।

সম্ভাব্য সমাধান:

টেবিলগুলি পিএইচপিতে উত্পন্ন হয়, তাই আমি কেবল বাইরের th / টিডিএসের প্রতিটিটিতে আলাদা ক্লাস প্রয়োগ করতে পারি এবং প্রতিটি কোণার পৃথকভাবে স্টাইল করতে পারি। আমি বরং এটি করব না, যেহেতু এটি একাধিক টেবিলের জন্য প্রয়োগ করা খুব মার্জিত এবং কিছুটা ব্যথা নয়, তাই দয়া করে পরামর্শগুলি রাখুন।

সম্ভাব্য সমাধান 2 হল জাভাস্ক্রিপ্ট (jQuery, বিশেষত) কোণগুলি স্টাইল করার জন্য ব্যবহার করা। এই সমাধানটিও কাজ করে, তবে এখনও আমি যা খুঁজছি তা পুরোপুরি নয় (আমি জানি আমি পছন্দসই)। আমার দুটি রিজার্ভেশন রয়েছে:

  1. এটি খুব হালকা ওজনের সাইট এবং আমি জাভাস্ক্রিপ্টটি সর্বনিম্ন রাখতে চাই
  2. আমার জন্য সীমানা-ব্যাসার্ধ ব্যবহার করা আপিলের অংশটি হ'ল গ্রেফসিয়াল অবক্ষয় এবং প্রগতিশীল বর্ধন। সমস্ত বৃত্তাকার কোণার জন্য সীমানা-ব্যাসার্ধ ব্যবহার করে, আমি আশা করি CSS3- সক্ষম ব্রাউজারগুলিতে একটি ধারাবাহিকভাবে বৃত্তাকার সাইট এবং অন্যগুলিতে একটি ধারাবাহিকভাবে বর্গক্ষেত্রের সাইট থাকবে (আমি আপনাকে দেখছি, IE))

আমি জানি যে আজ সিএসএস 3 দিয়ে এটি করার চেষ্টা করা অযথা মনে হতে পারে তবে আমার কারণগুলি রয়েছে। আমি আরও উল্লেখ করতে চাই যে এই সমস্যাটি ডাব্লু 3 সি স্পেসিফিকেশনের ফলস্বরূপ, সিএসএস 3 দরিদ্র সমর্থন নয়, সুতরাং CSS3 এর আরও বিস্তৃত সমর্থন থাকলে কোনও সমাধান এখনও প্রাসঙ্গিক এবং কার্যকর হবে।

html  css  rounded-corners  html-table 
— ভামিন
সূত্র
2
আপনি কি ডিবে টেবিলটি গুটিয়ে রাখতে পারবেন না, সীমানা-ব্যাসার্ধ সেট করুন এবং ডিভের উপর "ওভারফ্লো: লুকানো"? আমি কেবল পরীক্ষা করেছি এবং এটি সূক্ষ্মভাবে কাজ করে, যদি না আপনার প্রস্থ / উচ্চতা বা তার পিতামাতাদের ঠিক করা একটি ডিভিতে স্ক্রোলিং / প্রসারিত করার প্রয়োজন হয়।
— আয়ান
আমার মনে হয় সর্বশেষ সিএসএসের বিবৃতিতে একটি সেমিকোলন নেই।
— জেনসজি
3
এই প্রশ্নটি ২০০৯ সালে জিজ্ঞাসা করা হয়েছিল। আমি একটু অবাক হয়েছি যে ২০১৫ সালে নীচের তালিকাভুক্তদের চেয়ে ভাল সমাধান আর নেই। ডাব্লু 3 সি এর কয়েক বছর আগে এটি ঠিক করা উচিত ছিল।
— জোনাথন এম

উত্তর:

241

আমি এটি বের করেছিলাম। আপনাকে কেবল কিছু বিশেষ নির্বাচক ব্যবহার করতে হবে।

টেবিলের কোণে গোল করার সমস্যাটি ছিল যে টিডি উপাদানগুলিও গোল হয়ে ওঠে না। আপনি এরকম কিছু করে সমাধান করতে পারেন:

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

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

এখন সবকিছু ঠিকঠাকভাবে ঘুরছে, তা বাদে এখনও border-collapse: collapseসবকিছু ভেঙে ফেলার বিষয়টি রয়েছে ।

টেবিলে ডিফল্টটি যুক্ত করাborder-spacing: 0 এবং ছেড়ে দেওয়ার জন্য একটি কর্মপরিকল্পনা border-collapse: separate।

— ভামিন
সূত্র
75
এইচটিএমএল দিয়ে ঘাটাঘাটি করার পরিবর্তে, কেন border-spacing: 0;সীমানা শৈলী হিসাবে যুক্ত করা হবে না ?
— রামন তায়াগ
3
টিডি ট্যাগের পরিবর্তে টিআর ট্যাগের পটভূমি রঙ সেট করতে আমার একটি সমস্যা ছিল। আপনি যদি নিজের টেবিলটি স্ট্রাইপ করে থাকেন তবে আপনি টিডির ব্যাকগ্রাউন্ড রঙ নির্ধারণ করছেন কিনা তা নিশ্চিত হন।
— শেভ
যদি আপনি ওয়েল সেখানে কি ঘটছে আছে টিআর পটভূমি-রঙ ব্যবহার করবেন? এটা কি আদৌ সম্ভব?
— মোহোচ
1
border-spacing: 0;আমার জন্য এটি ঠিক করার মতো রামনের মতো সুপারিশ যুক্ত করুন। নিশ্চিত করুন যে আপনি যোগ করছি border-radiusএবং border-spacingশৈলী <th>বা <td>উপাদান, না <thead>বা <tbody>।
— গ্যাভিন
1
আমি বুটস্ট্র্যাপ ব্যবহার করছি এবং র্যামনের পরামর্শ ব্যবহার করে সমাধানটি border-spacing: 0; border-collapse: separate;
— পেয়েছি
84

নিম্নলিখিত পদ্ধতিটি "আসল" সীমানার পরিবর্তে box-shadowস্প্রেড সহ একটি ব্যবহার করে (ক্রোমে পরীক্ষিত) কাজ করে 1px।

table {
    border-collapse: collapse;
    border-radius: 30px;
    border-style: hidden; /* hide standard table (collapsed) border */
    box-shadow: 0 0 0 1px #666; /* this draws the table border  */ 
}

td {
    border: 1px solid #ccc;
}
— সেমিআরড.ক্যাশ
সূত্র
5
এটিই আমার পক্ষে কাজ করেছে। যদিও টেবিলের সীমানায় সঠিক রঙ পাওয়া কঠিন।
— থমাস আহলে
এটা তোলে ব্যবহারযোগ্য নয় যদি আপনার টেবিল পার্শ্ববর্তী এলাকা থেকে আলাদা পটভূমির রঙ হয়েছে।
— g.pickardou
1
আপনার কোডের জন্য আপনাকে ধন্যবাদ, এটি ফায়ারফক্স 26.0
— ম্যাক্সিভিস
1
@ g.pickardou যে সমস্যাটি টেবিলের উপাদানগুলিতে 'ওভারফ্লো: লুকানো' যুক্ত করে পরিচালনা করা যায়।
— Val,
বাক্স-ছায়া টেবিলটিকে বৃহত্তর করে তোলে এবং তাই পক্ষগুলি এখন কেটে যায়।
— রায়
63

আপনি যদি সিএসএস-কেবল সমাধান চান ( cellspacing=0HTML এ সেট করার দরকার নেই ) যা 1px সীমান্তের জন্য অনুমতি দেয় (যা আপনি border-spacing: 0সমাধানের সাথে করতে পারেন না ) তবে আমি নিম্নলিখিতটি করতে পছন্দ করি:

  • আপনার টেবিল কোষের জন্য একটি border-rightএবং সেট করুন border-bottom( tdএবং th)
  • প্রথম সারিতে ঘরগুলি কborder-top
  • কোষ দাও প্রথম কলামটি একটিborder-left
  • first-childএবং last-childনির্বাচকগুলি ব্যবহার করে , চারটি কোণে টেবিল কোষগুলির জন্য উপযুক্ত কোণটি বৃত্তাকার করুন।

এখানে একটি ডেমো দেখুন।

নিম্নলিখিত এইচটিএমএল দেওয়া হয়েছে:

নীচে উদাহরণ দেখুন: 

   

 .custom-table{margin:30px;}
    table {
        border-collapse: separate;
        border-spacing: 0;
        min-width: 350px;
        
    }
    table tr th,
    table tr td {
        border-right: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
        padding: 5px;
    }
    table tr th:first-child, table tr th:last-child{
    border-top:solid 1px      #bbb;}
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
        
    }
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
    }
    table tr th {
        background: #eee;
        text-align: left;
    }
    
    table.Info tr th,
    table.Info tr:first-child td
    {
        border-top: 1px solid #bbb;
    }
    
    /* top-left border-radius */
    table tr:first-child th:first-child,
    table.Info tr:first-child td:first-child {
        border-top-left-radius: 6px;
    }
    
    /* top-right border-radius */
    table tr:first-child th:last-child,
    table.Info tr:first-child td:last-child {
        border-top-right-radius: 6px;
    }
    
    /* bottom-left border-radius */
    table tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
    }
    
    /* bottom-right border-radius */
    table tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
    }
         
<div class="custom-table">
    <table>
        <tr>
            <th>item1</th>
            <th>item2</th>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
    </table>
</div>
স্নিপেট প্রসারিত করুন

— এক্সসেপশন
সূত্র
1
(স্থায়ী) কোড অন্তর্ভুক্ত উত্তর লিখুন। উত্তরে যদি প্রচুর কোড থাকে তবে কেবল প্রাসঙ্গিক বিট এবং সেগুলি কেন প্রাসঙ্গিক তা ব্যাখ্যা করুন post
— স্যামুয়েল হারমার
3
এটি দুর্দান্ত সমাধান, তবে এটি পড়তে কিছুটা কষ্ট হয়েছিল। আমি কিছু স্টাইলের নিয়মগুলি আবার লিখেছি এবং কোডটির একটি ব্যাখ্যা যুক্ত করেছি, তাই আশা করি এটি সহায়তা করে।
— মাইকেল মার্টিন-স্মুকার
টেবিলেও ব্যাসার্ধ প্রয়োগ করুন, অন্যথায় আপনি টেবিলে নিজেই একটি পটভূমি প্রয়োগ করার সময় এটি অদ্ভুত দেখাচ্ছে।
— ছাগল
কী table.Infoবর্গ কিছু দিয়ে কি ধরেছি?
— পাইলিনাক্স
28

আপনি কি এর table{border-spacing: 0}পরিবর্তে ব্যবহার করার চেষ্টা করেছেন table{border-collapse: collapse}???

— সেজার
সূত্র
আপনাকে ধন্যবাদ, এটি আমাকে যা করতে হবে তা করতে দাও (যার মধ্যে নীচে সমস্ত টিডি রয়েছে এমন 'গোলাকার কোণার' বাক্সের বাইরে শীর্ষে উপাদানগুলির একটি সিরিজ জড়িত ছিল)
— রনলগ
12
সমস্যাটি border-spacing: 0হ'ল আপনার 1px সীমানা থাকতে পারে না, তাই না? কারণ সীমানাগুলি ভেঙে পড়ার পরিবর্তে স্ট্যাক আপ।
— মাইকেল মার্টিন-স্মাকার 12
1
border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden;আমার যা প্রয়োজন ঠিক তা পেয়েছি।
— মিলাদ.নোজারি
23

আপনাকে সম্ভবত টেবিল এবং স্টাইলের চারপাশে আরও একটি উপাদান রাখতে হবে যা একটি বৃত্তাকার সীমানা সহ।

কাজ খসড়া নির্দিষ্ট করে border-radiusটেবিল উপাদান প্রযোজ্য নয় যখন মান border-collapseহয় collapse।

— user59200
সূত্র
এটি আমি বিবেচিত এমন কিছু ছিল, তবে আমি যদি টেবিলটিকে ঘিরে একটি ডিভি তৈরি করি এবং এটিতে বৃত্তাকার কোণগুলি সেট করে রাখি, তবে বর্গাকার টেবিলের কোণগুলি এখনও রক্তাক্ত হয়। সদ্য পোস্ট হওয়া উদাহরণটি দেখুন।
— ভাইমিন
আমি যে সর্বোত্তম আপসটি দেখতে পেলাম তা হ'ল টেবিলে একটি থ্যাড ব্লক যুক্ত করা এবং এটিতে ধূসর ব্যাকগ্রাউন্ড প্রয়োগ করা (টেবিলের মধ্যেই # আই সহ)) শিরোনামের ঘরগুলি তার সামনে টেবিলের সীমানার পিছনে উপচে পড়ল। তারপরে আমি ওভারফ্লো লুকানোর জন্য টেবিলের সীমানা 3px এ বাড়িয়েছি।
— ব্যবহারকারী59200
3
@ ভাইমিন "রক্তপাত" করছেন - আপনি যদি ব্যবহার করেন নাoverflow:hidden;
— ব্রায়ান ম্যাকচ্যাচন
সুতরাং এই পরিস্থিতিতে সবাই এই পৃষ্ঠার নীচ থেকে আমার সমাধানটি ব্যবহার করতে পারবেন b2n.ir/table-radius
— AmerllicA
15

ইয়ান যেমন বলেছিল, সমাধানটি হ'ল একটি ডিভের অভ্যন্তরে টেবিলটি বাসা এবং এটি সেট করা:

.table_wrapper {
  border-radius: 5px;
  overflow: hidden;
}

এর সাথে overflow:hidden, বর্গাকার কোণগুলি ডিভের মাধ্যমে রক্তপাত করবে না।

— ক্রিস
সূত্র
মনে রাখবেন, যে কেউ এটি ব্যবহার করতে চান, যে overflow: hiddenকোনও পপওভার / সরঞ্জামদণ্ডের সাথে মোড়কের আকারগুলি ক্লিপ হয়ে যাবে।
— ব্যবহারকারী 776686
7

আমার জ্ঞানের সর্বোপরি, আপনি যে উপায়টি করতে পারেন তার একমাত্র উপায় হ'ল এটির মতো সমস্ত কক্ষগুলি সংশোধন করা:

table td {
  border-right-width: 0px;
  border-bottom-width: 0px;
}

এবং তারপরে নীচে এবং ডানে ফিরে সীমানা পেতে

table tr td:last-child {
  border-right-width: 1px;
}
table tr:last-child td {
  border-bottom-width: 1px;
}

:last-childie6 এ বৈধ নয়, তবে আপনি যদি ব্যবহার করেন তবে border-radiusআমি ধরে নিই যে আপনার যত্ন নেই।

সম্পাদনা করুন:

আপনার উদাহরণ পৃষ্ঠাটি দেখার পরে মনে হচ্ছে আপনি সেল ফাঁকা এবং প্যাডিংয়ের সাহায্যে এটি ঘিরে কাজ করতে সক্ষম হতে পারেন।

আপনি যে ঘন ধূসর ধূসর সীমানা দেখতে পাচ্ছেন তা হ'ল টেবিলের পটভূমি (আপনি সীমানার রঙটি লাল রঙে পরিবর্তন করলে আপনি এটি স্পষ্ট দেখতে পাবেন)। যদি আপনি সেলস্পেসিং শূন্যে সেট করেন (বা সমতুল্য td, th { margin:0; }:) ধূসর "সীমানা" অদৃশ্য হয়ে যাবে।

সম্পাদনা 2:

আমি কেবল একটি টেবিল দিয়ে এটি করার উপায় খুঁজে পাচ্ছি না। যদি আপনি আপনার শিরোনাম সারিটি একটি নেস্টেড টেবিলটিতে পরিবর্তন করেন তবে আপনি সম্ভবত আপনার পছন্দমতো প্রভাব পেতে সক্ষম হতে পারেন তবে এটি আরও কাজ করবে, এবং গতিশীল হবে না।

— জোএল
সূত্র
আমি সেলস্পেসিং = 0 দিয়ে একটি উদাহরণ যুক্ত করেছি এবং এটি আরও কাছে। অবাঞ্ছিত সীমানা অদৃশ্য হয়ে যায়, তবে নীচের কোণগুলি এখনও রক্তাক্ত হয়।
— ভাইমন
আপনার সাহায্যের জন্য আবার ধন্যবাদ। টেবিলগুলি পিএইচপিতে উত্পন্ন হয়, তাই আমি ভাবছি যদি প্রস্তাবিত কোনও এলিগেন্ট সমাধান না থাকে আমি কেবল প্রতিটি কোণে th / td এ একটি শ্রেণি নির্ধারণ করব এবং সেগুলি পৃথকভাবে স্টাইল করব।
— ভামিন
6

আমি ছদ্ম উপাদানগুলি ব্যবহার করে একটি ওয়ার্কঅ্যারাউন্ড চেষ্টা :beforeএবং :afterউপর thead th:first-childএবংthead th:last-child

একটি সঙ্গে টেবিল মোড়ানো সঙ্গে সংমিশ্রণে <div class="radius borderCCC">

table thead th:first-child:before{ 
    content:" ";
    position:absolute;
    top:-1px;
    left:-1px;
    width:15px;
    height:15px;
    border-left:1px solid #ccc;
    border-top:1px solid #ccc; 
    -webkit-border-radius:5px 0px 0px;
}
table thead th:last-child:after{ 
    content:" "; 
    position:absolute; 
    top:-1px;
    right:-1px; 
    width:15px;
    height:15px;
    border-right:1px solid #ccc;
    border-top:1px solid #ccc;
    -webkit-border-radius:0px 5px 0px 0px;
}

দেখুন jsFiddle

ক্রোমে আমার জন্য কাজ করে (13.0.782.215) অন্য ব্রাউজারগুলিতে এটি আপনার জন্য কাজ করে কিনা তা আমাকে জানান।

— রেভস অ্যাডারডিজাইন
সূত্র
5

আসলে আপনি নিজের tableঅভ্যন্তরটিকে divএর মোড়ক হিসাবে যুক্ত করতে পারেন । এবং তারপরে এই CSSকোডগুলি মোড়কে নিয়োগ করুন:

.table-wrapper {
  border: 1px solid #f00;
  border-radius: 5px;
  overflow: hidden;
}

table {
  border-collapse: collapse;
}
— AmerllicA
সূত্র
4

প্রদত্ত উত্তরগুলি কেবল তখনই কার্যকর হয় যখন টেবিলের চারপাশে কোনও সীমানা না থাকে, যা খুব সীমাবদ্ধ!

এসএএসএসে এটি করার জন্য আমার কাছে একটি ম্যাক্রো রয়েছে, যা বাহ্যিক এবং অভ্যন্তরীণ সীমানাকে পুরোপুরি সমর্থন করে , সীমানা-পতনের মতো একই স্টাইলিং অর্জন করে: আসলে এটি নির্দিষ্ট করে না দিয়ে ধস।

এফএফ / আইই 8 / সাফারি / ক্রোমে পরীক্ষিত।

আইই 8 সীমানা ব্যাসার্ধটিকে সমর্থন করে না বলে সমস্ত ব্রাউজারগুলিতে খাঁটি সিএসএসে দুর্দান্ত গোলাকৃতির সীমানা দেয় তবে আইই 8 (করুণভাবে হ্রাস করে) :(

কিছু পুরানো ব্রাউজারগুলির সাথে কাজ করার জন্য বিক্রেতার উপসর্গের প্রয়োজন হতে পারেborder-radius , সুতরাং প্রয়োজনীয় হিসাবে আপনার কোডে এই উপসর্গগুলি সংযোজন করতে দ্বিধা বোধ করবেন।

এই উত্তরটি সবচেয়ে কম নয় - তবে এটি কার্যকর হয়।

.roundedTable {
  border-radius: 20px / 20px;
  border: 1px solid #333333;
  border-spacing: 0px;
}
.roundedTable th {
  padding: 4px;
  background: #ffcc11;
  border-left: 1px solid #333333;
}
.roundedTable th:first-child {
  border-left: none;
  border-top-left-radius: 20px;
}
.roundedTable th:last-child {
  border-top-right-radius: 20px;
}
.roundedTable tr td {
  border: 1px solid #333333;
  border-right: none;
  border-bottom: none;
  padding: 4px;
}
.roundedTable tr td:first-child {
  border-left: none;
}

এই স্টাইলটি প্রয়োগ করতে কেবল আপনার পরিবর্তন করুন

<table>

নিম্নলিখিতগুলিতে ট্যাগ করুন:

<table class="roundedTable">

এবং উপরের সিএসএস শৈলীগুলি আপনার এইচটিএমএলে অন্তর্ভুক্ত করার বিষয়ে নিশ্চিত হন।

আশাকরি এটা সাহায্য করবে.

— রবি 613
সূত্র
আপনার আর সীমানা ব্যাসার্ধের উপসর্গের দরকার নেই, এফএফ 3.6 (-মোজ) এর জন্য আশা করুন। এছাড়াও, -khtml অবশ্যই আর প্রয়োজন নেই।
— জোনাটান লিটকে
@ জোনাটানলিটকে, আপনি যদি উত্তরটি উন্নত করতে পারেন তবে আপনি সর্বদা উত্তরটি সম্পাদনা করতে পারবেন। আমি সমস্ত উপসর্গ মুছে ফেলেছি এবং caniuse.com এ একটি লিঙ্ক যুক্ত করেছি যাতে লোকেরা উপসর্গগুলি সম্পর্কে নিজস্ব সিদ্ধান্ত নিতে পারে border-radius।
— মাইকেল মার্টিন-স্মুকার
4

সীমানাযুক্ত এবং স্ক্রোলযোগ্য টেবিলের জন্য, এটি ব্যবহার করুন (ভেরিয়েবলগুলি প্রতিস্থাপন করুন, $পাঠ্য শুরু করুন)

আপনি ব্যবহার করেন তাহলে 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; }

এইচটিএমএল:

<div id=table-wrap>
  <table>
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
    <tr>
       <td>3</td>
       <td>4</td>
    </tr>
  </table>
</div>
— brauliobo
সূত্র
4

আমারও একই সমস্যা ছিল। border-collapseসম্পূর্ণ অপসারণ এবং ব্যবহার করুন: cellspacing="0" cellpadding="0" এইচটিএমএল নথিতে document উদাহরণ:

<table class="top_container" align="center" cellspacing="0" cellpadding="0">
— লার্স
সূত্র
এটি কাজ করে, তবে এর পরে আপনার প্রভাবটি পেতে ফার্স্টচাইল্ড / লাস্টচাইল্ড কৌশলগুলি ব্যবহার করা প্রয়োজন।
— থমাস আহলে
4

আমি কেবল এটির জন্য সিএসএসের একটি ক্রেজি সেট লিখেছি যা পুরোপুরি কার্যকর বলে মনে হচ্ছে:

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
table td,
table th {
  border-right: 1px solid #CCC;
  border-top: 1px solid #CCC;
  padding: 3px 5px;
  vertical-align: top;
}
table td:first-child,
table th:first-child {
  border-left: 1px solid #CCC;
}
table tr:last-child td,
table tr:last-child th {
  border-bottom: 1px solid #CCC;
}
table thead + tbody tr:first-child td {
  border-top: 0;
}
table thead td,
table th {
  background: #EDEDED;
}

/* complicated rounded table corners! */
table thead:first-child tr:last-child td:first-child {
  border-bottom-left-radius: 0;
}
table thead:first-child tr:last-child td:last-child {
  border-bottom-right-radius: 0;
}
table thead + tbody tr:first-child td:first-child {
  border-top-left-radius: 0;
}
table thead + tbody tr:first-child td:last-child {
  border-top-right-radius: 0;
}
table tr:first-child td:first-child,
table thead tr:first-child td:first-child {
  border-top-left-radius: 5px;
}
table tr:first-child td:last-child,
table thead tr:first-child td:last-child {
  border-top-right-radius: 5px;
}
table tr:last-child td:first-child,
table thead:last-child tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}
table tr:last-child td:last-child,
table thead:last-child tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

/* end complicated rounded table corners !*/
— রেভ
সূত্র
3

সীমানা-পতনের সাথে সমাধান: টেবিল এবং প্রদর্শনের জন্য পৃথক করুন: টডি এবং থ্যাডের জন্য ইনলাইন-টেবিল।

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px;
  background: transparent;   
}
table thead {
  display: inline-table;
  width: 100%;
  background: #fc0 url(../images/bg-heading.png) repeat-x 0% 0;
  -webkit-border-top-left-radius: 7px;
  -moz-border-radius-topleft: 7px;
  -webkit-border-top-right-radius: 7px;
  -moz-border-radius-topright: 7px;
    border-radius: 7px 7px 0px 0px;
  padding: 1px;
  padding-bottom: 0;
}

table tbody {
  border: 1px solid #ddd;
  display: inline-table;
  width: 100%;
  border-top: none;        
}
— Tommer
সূত্র
এই উত্তরটির সম্প্রদায়টি উইকি করার কোনও কারণ নেই। এটি করার ফলে এটি আপনার উত্তর থেকে কোনও খ্যাতি পাবে না।
— টাকসওয়েল
3

আমি এইচটিএমএল এবং সিএসএসের সাথে নতুন এবং আমি এটির সমাধানও খুঁজছিলাম, এখানে আমি কী খুঁজে পাচ্ছি।

table,th,td {
   border: 1px solid black;
   border-spacing: 0
}
/* add border-radius to table only*/
table {
   border-radius: 25px    
}
/* then add border-radius to top left border of left heading cell */
th:first-child {
   border-radius: 25px 0 0 0
}
/* then add border-radius to top right border of right heading cell */
th:last-child {
   border-radius: 0 25px 0 0
}
/* then add border-radius to bottom left border of left cell of last row */
tr:last-child td:first-child {
   border-radius: 0 0 0 25px
}
/* then add border-radius to bottom right border of right cell of last row */
tr:last-child td:last-child {
   border-radius: 0 0 25px 0
}

আমি চেষ্টা করে দেখি, এটি কী কাজ করে :)

— আহমেদ মোস্তফা
সূত্র
3

একই সমস্যার মধ্যে দৌড়ানোর পরে এই উত্তরটি খুঁজে পেয়েছিল তবে এটি পাওয়া গেছে এটি বেশ সহজ: কেবল টেবিলকে ওভারফ্লো করুন: লুকানো

মোড়কের উপাদানটির দরকার নেই। মঞ্জুর, আমি জানি না 7 বছর আগে যখন প্রশ্নটি প্রাথমিকভাবে জিজ্ঞাসা করা হয়েছিল তখন এটি কাজ করেছিল কিনা, তবে এটি এখন কার্যকর হয়।

— Akexis
সূত্র
এটি একটি চতুর সমাধান তবে এটি আসল সীমানাকেও "মুছে ফেলে"। Chrome এ সারণির ডান সীমানা এবং নীচের সীমানা অদৃশ্য হয়ে যায় এবং সমস্ত বৃত্তাকার কোণগুলির কোনও সীমানা থাকে না।
— অ্যালেক্স জর্জনসন
3

গোলাকার কোণ এবং সীমানাযুক্ত কক্ষগুলির সাথে সারণী। @ রমন তাইগ সলিউশন ব্যবহার করে ।

কীটি border-spacing: 0তিনি উল্লেখ করেছেন তেমন ব্যবহার করা।

এসসিএসএস ব্যবহার করে সমাধান ।

$line: 1px solid #979797;
$radius: 5px;

table {
  border: $line;
  border-radius: $radius;
  border-spacing: 0;
  th,
  tr:not(:last-child) td {
    border-bottom: $line;
  }
  th:not(:last-child),
  td:not(:last-child) {
    border-right: $line;
  }
}
— পেয়ার পৃষ্ঠা
সূত্র
2

আমি "প্রদর্শন" সঙ্গে পরীক্ষা শুরু হয় এবং আমি দেখেছি যে: border-radius, border, margin, padding, একটি tableসঙ্গে প্রদর্শিত হয়:

display: inline-table;

উদাহরণ স্বরূপ 

table tbody tr {
  display: inline-table;
  width: 960px; 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

তবে আমাদের widthপ্রতিটি কলামের একটি সেট করা দরকার

tr td.first-column {
  width: 100px;
}
tr td.second-column {
  width: 860px;
}
— অ্যাস্ট্রো
সূত্র
2

Http://medialoot.com/preview/css-ui-kit/demo.html থেকে বৃত্তাকার-কোণগুলির সাথে কোনও টেবিলটি কীভাবে প্রয়োগ করা যায় তার সাম্প্রতিক উদাহরণ এখানে । এটি উপরের জোয়েল পটারের প্রস্তাবিত বিশেষ নির্বাচকদের উপর ভিত্তি করে। যেমন আপনি দেখতে পাচ্ছেন, এতে IE কে একটু খুশি করতে কিছু জাদুও অন্তর্ভুক্ত। এটিতে সারিগুলির রঙ বিকল্প করতে কয়েকটি অতিরিক্ত শৈলী অন্তর্ভুক্ত রয়েছে:

table-wrapper {
  width: 460px;
  background: #E0E0E0;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7');
  background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D7D7D7));
  background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7);
  padding: 8px;
  -webkit-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -moz-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -o-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -khtml-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -webkit-border-radius: 10px;
  /*-moz-border-radius: 10px; firefox doesn't allow rounding of tables yet*/
  -o-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.table-wrapper table {
  width: 460px;
}
.table-header {
  height: 35px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: center;
  line-height: 34px;
  text-decoration: none;
  font-weight: bold;
}
.table-row td {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  font-weight: normal;
  color: #858585;
  padding: 10px;
  border-left: 1px solid #ccc;
  -khtml-box-shadow: 0px 1px 0px #B2B3B5;
  -webkit-box-shadow: 0px 1px 0px #B2B3B5;
  -moz-box-shadow: 0px 1px 0px #ddd;
  -o-box-shadow: 0px 1px 0px #B2B3B5;
  box-shadow: 0px 1px 0px #B2B3B5;
}
tr th {
  border-left: 1px solid #ccc;
}
tr th:first-child {
 -khtml-border-top-left-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  -o-border-top-left-radius: 8px;
  /*-moz-border-radius-topleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-left-radius: 8px;
  border: none;
}
tr td:first-child {
  border: none;
}
tr th:last-child {
  -khtml-border-top-right-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -o-border-top-right-radius: 8px;
  /*-moz-border-radius-topright: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-right-radius: 8px;
}
tr {
  background: #fff;
}
tr:nth-child(odd) {
  background: #F3F3F3;
}
tr:nth-child(even) {
  background: #fff;
}
tr:last-child td:first-child {
  -khtml-border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -o-border-bottom-left-radius: 8px;
  /*-moz-border-radius-bottomleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-left-radius: 8px;
}
tr:last-child td:last-child {
  -khtml-border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -o-border-bottom-right-radius: 8px;
  /*-moz-border-radius-bottomright: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-right-radius: 8px;
}
— ম্যাক কাউয়েল
সূত্র
1

এখানে একটি উপায়:

div {
  ...
  overflow: hidden;
  border-radius: 14px;
  transform: rotate(0deg);
}
table {
  border-spacing: 0;
}
<div>
  <table></table>
</div>
স্নিপেট প্রসারিত করুন

অথবা

    div {
      ...
      overflow: hidden;
      border-radius: 14px;
      position: relative;
      z-index: 1;
    }
— লু
সূত্র
0

আমি সবসময় সাস ব্যবহার করে এইভাবে করি

table {
  border-radius: 0.25rem;
  thead tr:first-child th {
    &:first-child {
      border-top-left-radius: 0.25rem;
    }
    &:last-child {
      border-top-right-radius: 0.25rem;
    }
  }
  tbody tr:last-child td {
    &:first-child {
      border-bottom-left-radius: 0.25rem;
    }
    &:last-child {
      border-bottom-right-radius: 0.25rem;
    }
  }
}
— দিয়েগো মেলো
সূত্র
আমার ধারণা আপনি সম্ভবত এটি পেলেন না, তিনি border-collapse: collapseসক্ষম হয়ে এটি করার চেষ্টা করছেন ।
— জিওভান্নিপ্ডস
@ গিওভানিপিডস তার নিজের উত্তরটি দেখুন (স্বীকৃত উত্তর) আমার উপায় অন্য উপায়। এবার "-1" সরান।
— দিয়েগো মেলো
ওহ, আমি দুঃখিত, আপনি অবশ্যই ঠিক বলেছেন, আমার ভুল, তাঁর গৃহীত উত্তরটি ঠিক একই জিনিস বলে মনে হচ্ছে। আমি প্রশ্নের শিরোনামে যা লেখা ছিল তাতে লেগে থাকি, তিনি জোর দিয়েছিলেন যে তিনি সীমান্ত-পতন চান তাই আমি সরাসরি তাতে চলে গেলাম। আমি পারলে আমি -1 সরিয়ে ফেলব, তবে আমি পারব না, আমাকে এটির অনুমতি দেওয়ার জন্য আপনাকে উত্তরে কিছু সম্পাদনা করতে হবে। এটি দিয়ে সম্ভব নয় এমন বিষয়ে কিছু উল্লেখ করার চেষ্টা করুন border-collapse: collapse। আবার ক্ষমা করুন, আমি আপনার আপডেট অপেক্ষা করব।
— জিয়োভানিপডস
0

এখন পর্যন্ত সেরা সমাধানটি আপনার নিজের সমাধান থেকে আসে এবং এটি এর মতো হয়:

table, tr, td, th{
  border: 1px solid; 
  text-align: center;
}

table{
	border-spacing: 0;
  width: 100%;
  display: table;
}

table tr:last-child td:first-child, tr:last-child, table {
    border-bottom-left-radius: 25px;
}

table tr:last-child td:last-child, tr:last-child, table {
    border-bottom-right-radius: 25px;
}


table tr:first-child th:first-child, tr:first-child, table {
    border-top-left-radius: 25px;
}

table tr:first-child th:last-child, tr:first-child, table {
    border-top-right-radius: 25px;
}
<table>
  <tr>
    <th>Num</th><th>Lett</th><th>Lat</th>
  </tr>
  <tr>
    <td>1</td><td>A</td><td>I</td>
  </tr>
  <tr>
    <td>2</td><td>B</td><td>II</td>
  </tr>
  <tr>
    <td>3</td><td>C</td><td>III</td>
  </tr>
</table>
স্নিপেট প্রসারিত করুন

— Μιχελής Μιχελής
সূত্র
-1

সীমানা ব্যাসার্ধ এখন সরকারীভাবে সমর্থিত। সুতরাং, উপরের সমস্ত উদাহরণে আপনি "-moz-" উপসর্গটি ফেলে দিতে পারেন।

অন্য কৌশলটি হ'ল উপরের এবং নীচের সারিগুলির জন্য একই রঙটি আপনার সীমানার মতো ব্যবহার করা। সমস্ত 3 টি রঙ একই রঙের সাথে এটি মিশ্রিত হয় এবং এটি শারীরিকভাবে না হলেও পুরোপুরি গোলাকার টেবিলের মতো দেখায়।

— বাজপাখি
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.