সিএসএসের সাহায্যে অযাচিত টেবিল কক্ষের সীমানা অপসারণ করা হচ্ছে


89

আমার এক অদ্ভুত এবং হতাশার সমস্যা আছে। সাধারণ মার্কআপের জন্য:

<table>
    <thead>
        <tr><th>1</th><th>2</th><th>3</th></tr>
     </thead>
    <tbody>
        <tr><td>a</td><td>b></td><td>c</td></tr>
        <tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
    </tbody>
</table>

আমি থ্যাড , টিআর এবং টিআর বিজোড় উপাদানগুলিতে বিভিন্ন ব্যাকগ্রাউন্ড-কালার মান প্রয়োগ করি । সমস্যাটি হ'ল বেশিরভাগ ব্রাউজারগুলিতে প্রতিটি ঘরে একটি অযাচিত সীমানা থাকে যা কোনও সারণির সারিগুলির রঙ নয়। কেবল ফায়ারফক্স ৩.৫ এ সারণীর কোনও ঘরে কোনও সীমানা নেই।

আমি কেবল অন্যান্য প্রধান ব্রাউজারগুলিতে এই সীমানাগুলি কীভাবে সরিয়ে ফেলতে হয় তা জানতে চাই যাতে আপনি সারণীতে যে জিনিসটি দেখেন কেবল সেটিই বিকল্প সারি রঙ হয়।


4
প্রত্যেককে ধন্যবাদ যারা সীমান্ত-পতন: সিএসএসে পতনকে যুক্ত করার পরামর্শ দিয়েছেন। এটা এটা করেছে।
বব

উত্তর:


211

আপনার এটি আপনার সিএসএসে যুক্ত করতে হবে:

table { border-collapse:collapse }

13
নোট করুন এটি টেবিলে প্রয়োগ করতে হবে , টিডি -র নয়। আমি কেবল এই ভুলটি করেছিলাম এবং কেন এটি কাজ করছে না তা জানার চেষ্টা করার জন্য আধ ঘন্টা ধরে উপরে ব্যয় করেছি।
jawawizard


15

আপনার এইচটিএমএল এর মত পরিবর্তন করুন:

<table border="0" cellpadding="0" cellspacing="0">
    <thead>
        <tr><td>1</td><td>2</td><td>3</td></tr>
     </thead>
    <tbody>
        <tr><td>a</td><td>b></td><td>c</td></tr>
        <tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
    </tbody>
</table>

(আমি যুক্ত border="0" cellpadding="0" cellspacing="0")

সিএসএসে আপনি নিম্নলিখিতগুলি করতে পারেন:

table {
    border-collapse: collapse;
}

12

সীমানা অপসারণ করতে, এই জাতীয় CSS ব্যবহার করে ন্যায়বিচার করুন:

td {
 border-style : hidden!important;
}

8

cellspacingসারণীর বৈশিষ্ট্য এতে সেট করুন 0

আপনি সিএসএস শৈলীটিও ব্যবহার করতে পারেন border-spacing: 0, তবে কেবলমাত্র আপনার যদি IE এর পুরানো সংস্করণগুলি সমর্থন করার প্রয়োজন না হয়।


1

আপনি যোগ করতে চাইতে পারেন

table td { border:0; }

উপরেরটি সেলপ্যাডিং = "0" সেট করার সমতুল্য

এটি ব্রাউজারগুলির দ্বারা স্বয়ংক্রিয়ভাবে সেলগুলিতে যুক্ত প্যাডিং থেকে মুক্তি পাবে যা ডিফল্ট ব্রাউজার শৈলীর পুনরায় সেট করতে ব্যবহৃত ডক্টাইপ এবং / অথবা কোনও সিএসএসের উপর নির্ভর করে


4
সেলপ্যাডিং হ'ল টেবিলের সামগ্রী এবং এর সীমাগুলির মধ্যে স্থান td{padding:X}। সেলস্প্যাকিং হ'ল প্রতিটি ঘরের উদ্যানের মধ্যে স্থান (ঘরের সীমানার মধ্যে "মার্জিন")। টেবিল ট্যাগটিতে বৈশিষ্ট্যটি border-collapseকী করে তা আপনি নকল করে সেট করতে পারেন cellspacingতবে এটি নির্বোধ নয়।
মেটালফ্রোগ

1

উপরের পরামর্শগুলি চেষ্টা করার পরে, আমার পক্ষে কাজ করা একমাত্র শিশু থিমের স্টাইল। CSS এর নিম্নলিখিত বিভাগগুলিতে সীমানা বৈশিষ্ট্যটি "0" তে পরিবর্তন করা ছিল (প্রতিটিটিকে সনাক্ত করতে "সন্ধান করুন" অপারেশন করুন - নিম্নলিখিতগুলি কেবলমাত্র স্নিপেটস):

.comment-content table {
    border-bottom: 1px solid #ddd;

.comment-content td {
    border-top: 1px solid #ddd;
    padding: 6px 10px 6px 0;
}

এভাবে পরে দেখা হচ্ছে:

.comment-content table {
    border-bottom: 0;

.comment-content td {
    border-top: 0;
    padding: 6px 10px 6px 0;
}

0

border: 0px; border-collapse: collapse;টেবিল উপাদানটির স্টাইলটি নির্ধারণের চেষ্টা করুন ।


4
@ জোশ তাই না border: none?
ডগ নিনার

@ ডগনিইনার ওল্ড পোস্ট, তবে কোনওটি নয় এবং 0 উভয়ই সমানভাবে বৈধ। আমি 0 টি পছন্দ করি কারণ আমাকে কম টাইপ করতে হবে :)
স্কট সিমন্টিস

-1

কখনও কখনও borderএস সাফ করার পরেও ।

কারণটি হ'ল আপনার অভ্যন্তরে চিত্র রয়েছে td, চিত্রগুলি প্রদান করা এটি display:blockসলভ করে।

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