আমি কেবল একটি টেবিলের অভ্যন্তরে কীভাবে একটি সীমানা প্রয়োগ করতে পারি?

Question

আমি কীভাবে কেবল সারণির অভ্যন্তরে সীমানা যুক্ত করব তা বোঝার চেষ্টা করছি। যখন আমি করি:

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

সীমানাটি পুরো টেবিলের চারপাশে এবং টেবিলের ঘরগুলির মধ্যেও। আমি যা অর্জন করতে চাই তা হ'ল টেবিলের অভ্যন্তরে কেবল টেবিলের অভ্যন্তরে সীমানা থাকা (টেবিলের চারপাশে বাইরের সীমানা ছাড়াই)।

এখানে আমি টেবিলগুলির জন্য ব্যবহার করছি তা চিহ্নিত করা (যদিও আমি মনে করি এটি গুরুত্বপূর্ণ নয়):

<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

এবং এখানে কয়েকটি প্রাথমিক শৈলীগুলি আমি আমার বেশিরভাগ টেবিলগুলিতে প্রয়োগ করি:

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

Comments

আমি কেবলমাত্র ঘরের চারদিকে সীমানা দেখি। যেহেতু প্রতিটি কক্ষের একটি সীমানা রয়েছে তাই এটি টেবিলের একটি সীমানা রয়েছে বলে মনে হয়। সম্ভবত আমি প্রশ্ন পাই না?

— চেতন এস

একে অভ্যন্তরীণ সীমানাও বলা হয় ।

— যান্ত্রিক শামুক

Answer 1

আপনি যদি বিশ্বাস করেন যে আপনি যা করার চেষ্টা করছেন আপনি যদি তা করেন তবে আপনার আরও কিছুটা এরকম দরকার হবে:

table {
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid black;
}
table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}

jsFizz ডেমো

সমস্যাটি হ'ল আপনি সমস্ত কক্ষের চারপাশে একটি 'পূর্ণ সীমানা' সেট করছেন যা এটি পুরো টেবিলে চারপাশে একটি সীমানা রয়েছে বলে মনে হয়।

চিয়ার্স।

সম্পাদনা: এই সিউডো-ক্লাসগুলির সম্পর্কে আরও কিছু তথ্য কোয়ার্কস্মোডে পাওয়া যাবে এবং যেমনটি প্রত্যাশা করা যায়, আপনি IE সমর্থনের দিক থেকে বেশ সোল হন।

Comments

এর মতো সাধারণ সারণীগুলির সাহায্যে একটি আরও সংক্ষিপ্ত সমাধান পাওয়া যায় যা পরবর্তী ভাইবোন সংযোজক ব্যবহার করে সিউডো-ক্লাস ব্যবহার করা এড়ানো যায়। আমার উত্তর দেখুন।

— ডালগার্ড

@ থিআইভি, 5 বছর আগে এই উত্তর দেওয়া হয়েছে, কোন 'নতুন' / 'আরও দক্ষ' উপায় আছে যে?

— jbutler483

আপনি যদি কোনও টেবিলের প্রথম কলামে সারি স্প্যান ব্যবহার করেন তবে তা কাজ করে না।

— জ্যাক

Answer 2

এটি আমার পক্ষে কাজ করে:

table {
    border-collapse: collapse;
    border-style: hidden;
}

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

উদাহরণ দেখুন ...

এফএফ 3.6 এবং ক্রোমিয়াম 5.0 এ পরীক্ষিত, IE এর সমর্থন নেই; ডাব্লু 3 সি থেকে :

'গোপনে' সীমানা-শৈলীর সীমানা অন্য সমস্ত বিবাদমান সীমানার চেয়ে বেশি প্রাধান্য পায়। এই মান সহ যে কোনও সীমানা এই অবস্থানের সমস্ত সীমানাকে দমন করে।

Comments

যতক্ষণ না আপনার কোনও সারণির সীমানার প্রয়োজন হয় না, এটি অবশ্যই সবচেয়ে মার্জিত সমাধান।

— সিজরথ

Answer 3

আপনার পছন্দসই প্রভাব অর্জনের জন্য খুব সহজ পদ্ধতির উদাহরণ :

<table border="1" frame="void" rules="all">
    <tr>
        <td>1111</td>
        <td>2222</td>
        <td>3333</td>
    </tr>
    <tr>
        <td>4444</td>
        <td>5555</td>
        <td>6666</td>
    </tr>
</table>

Comments

"ম্যাজিক" ব্যাখ্যা করেন: frame এবং rulesহয় বৃদ্ধ (না HTML5 এর) table বৈশিষ্ট্যাবলী (আপনি সিএসএস পরিবর্তে ব্যবহার করা উচিত)। frameবলে যে বাইরের সারণির সীমানার অংশগুলি দৃশ্যমান হওয়া উচিত - এর voidঅর্থ বাইরের সমস্ত সীমানা লুকিয়ে রাখুন ... rulesবলেছেন টেবিলের সীমানার অভ্যন্তরের কোন অংশটি দৃশ্যমান হওয়া উচিত - এর allঅর্থ সমস্তগুলি ... স্পষ্টত ... দয়া করে আপনি এটি ব্যবহার করবেন না যদি না আপনি

— এইচটিএমএল

সীমান্তের মতো কিছু যুক্ত করা: 1px শক্ত কালো এটি সারণির বাইরের সীমানা একটি সীমানা পেয়েছে তা নিশ্চিত করবে।

— অ্যারন লিউ

আমি যে ওয়েবসাইটটি পড়ছিলাম তার একটি হাস্যকরভাবে ব্যবধানযুক্ত টেবিলটিতে দ্রুত কিছু পাঠযোগ্যতা যুক্ত করার জন্য ২০২০ সালে মনোযোগের মতো কাজ করেছিলেন। আসলে, কেবল অভ্যন্তরীণ সীমানাগুলির জন্য এটি যথেষ্ট ছিল: বিধিগুলি = "সমস্ত"

— এডোয়ার্ডো ফেচিনেল্লি

Answer 4

Ie7 এর সাথে ম্যানটেন সামঞ্জস্যের কারণে, অর্থাৎ আমি এই কাজটি করার জন্য প্রথম-সন্তানের এবং শেষ-সন্তানের নয় ব্যবহার করার পরামর্শ দিচ্ছি:

table tr td{border-top:1px solid #ffffff;border-left:1px solid #ffffff;}

table tr td:first-child{border-left:0;}

table tr:first-child td{border-top:0;}

আপনি সিএসএস 2.1 সিউডো-ক্লাস সম্পর্কে শিখতে পারেন: http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

Comments

এটি একটি দুর্দান্ত সমাধান। তবে সতর্কতা অবলম্বন করুন, যদি আপনার কোনও টেবিল কোষে আপনার অন্য একটি টেবিল থাকে এবং অভ্যন্তরীণ সীমানাগুলি দেখতে চান আপনার "অভ্যন্তরীণ" টেবিলের জন্য আপনার আর একটি সিএসএস লাইন দরকার

— মাইকেল বিম্যান্ন

Answer 5

সাধারণ টেবিল মার্কআপের জন্য, এখানে একটি সংক্ষিপ্ত সমাধান যা ব্রাউজারস্ট্যাকের সমস্ত ডিভাইস / ব্রাউজারগুলিতে আই আই 7 এবং নীচে ব্যতীত কাজ করে:

table { border-collapse: collapse; }

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

আইই 7 সমর্থন জন্য, এটি যুক্ত করুন:

tr + tr > td,
tr + tr > th { border-top: 1px solid; }

একটি পরীক্ষার কেসটি এখানে দেখা যাবে: http://codepen.io/dalgard/pen/wmcdE

Comments

দুর্দান্ত - যেহেতু এটির সাহায্যে টেবিলে একটি আলাদা সীমানা সেট করা যায়, কেবল এটি প্রদর্শিত না করেই রাটার।

— jsbueno

Answer 6

এই কাজ করা উচিত:

table {
 border:0;
}

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

---

সম্পাদনা:

আমি কেবল এটি চেষ্টা করেছি, কোনও টেবিলের সীমানা নেই। তবে যদি আমি কোনও টেবিলের সীমানা সেট করি তবে এটি সীমান্ত-পতনের দ্বারা নির্মূল করা হবে।

এই টেস্টফাইল:

<html>
<head>
<style type="text/css">
table {
    border-collapse: collapse;
    border-spacing: 0;
}


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


</style>
</head>
<body>
<table>
    <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
    </tr>
    <tr>
        <td>Cell (1,1)</td>
        <td>Cell (1,2)</td>
    </tr>
    <tr>
        <td>Cell (2,1)</td>
        <td>Cell (2,2)</td>
    </tr>
    <tr>
        <td>Cell (3,1)</td>
        <td>Cell (3,2)</td>
    </tr>
</table>

</body>
</html>

Comments

না যে কাজ করে না আমি চেষ্টা করেছি। আমি আমার প্রথম পোস্ট সম্পাদনা করব।

— রিচার্ড নপ

Answer 7

এটি CSS ছাড়াই এটি করবে <TABLE BORDER=1 RULES=ALL FRAME=VOID>

কোড থেকে: এইচটিএমএল কোড প্রশিক্ষণ I

Answer 8

এটির সাথে প্রতিটি কক্ষে সীমানা যুক্ত করুন:

table > tbody > tr > td { border: 1px solid rgba(255, 255, 255, 0.1); }

প্রথম সারিতে থাকা সমস্ত ঘর থেকে উপরের সীমানাটি সরান:

table > tbody > tr:first-child > td { border-top: 0; }

প্রথম কলামে ঘর থেকে বাম সীমানা সরান:

table > tbody > tr > td:first-child { border-left: 0; }

শেষ কলামে ঘর থেকে ডান সীমানা সরান:

table > tbody > tr > td:last-child { border-right: 0; }

শেষ সারিতে থাকা ঘরগুলি থেকে নীচের সীমানাটি সরান:

table > tbody > tr:last-child > td { border-bottom: 0; }

http://jsfiddle.net/hzru0ytx/

Answer 9

Tbody / thead / tfoot এবং td / th এর যেকোন সংমিশ্রনের জন্য কাজ করে

table.inner-border {
    border-collapse: collapse;
    border-spacing: 0;
}

table.inner-border > thead > tr > th,
table.inner-border > thead > tr > td,
table.inner-border > tbody > tr > th,
table.inner-border > tbody > tr > td,
table.inner-border > tfoot > tr > th,
table.inner-border > tfoot > tr > td {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
}

table.inner-border > thead > tr > :last-child,
table.inner-border > tbody > tr > :last-child,
table.inner-border > tfoot > tr > :last-child {
    border-right: 0;
}

table.inner-border > :last-child > tr:last-child > td,
table.inner-border > :last-child > tr:last-child > th {
    border-bottom: 0;
}

<table class="inner-border">
    <thead>
    <tr>
        <th>head1,1</th>
        <td>head1,2</td>
        <td>head1,3</td>
    </tr>
    <tr>
        <td>head2,1</td>
        <td>head2,2</td>
        <th>head2,3</th>
    </tr>
    </thead>
    <tr>
        <td>1,1</td>
        <th>1,2</th>
        <td>1,3</td>
    </tr>
    <tr>
        <td>2,1</td>
        <td>2,2</td>
        <td>2,3</td>
    </tr>
    <tr>
        <td>3,1</td>
        <td>3,2</td>
        <td>3,3</td>
    </tr>
    <thead>
    <tr>
        <th>foot1,1</th>
        <td>foot1,2</td>
        <td>foot1,3</td>
    </tr>
    <tr>
        <td>foot2,1</td>
        <th>foot2,2</th>
        <th>foot2,3</th>
    </tr>
    </thead>
</table>