সিএসএসে সেলপ্যাডিং এবং সেলস্পেসিং সেট করবেন?

Question

এইচটিএমএল সারণিতে, cellpaddingএবং cellspacingএটি সেট করা যেতে পারে:

<table cellspacing="1" cellpadding="1">

সিএসএস ব্যবহার করে কীভাবে এটি সম্পন্ন করা যায়?

Comments

কেবলমাত্র একটি সাধারণ পরামর্শ, এই সমাধানগুলি ব্যবহার করার আগে আপনার স্টাইল। CSS আপনার টেবিলগুলিতে "রিসেট" করে কিনা তা পরীক্ষা করে দেখুন। উদাহরণ: আপনার যদি টেবিল সেট না করা থাকে width:autoতবে border-collapseপ্রত্যাশার মতো কাজ নাও করতে পারেন।

— পিজে ব্রুনেট

টেবিলে সীমানা-ব্যবধান এবং টিডিতে প্যাডিং ব্যবহার করুন।

— অনুভ

Answer 1

বুনিয়াদি

সিএসএসে "সেলপ্যাডিং" নিয়ন্ত্রণের জন্য, আপনি কেবল paddingটেবিলের ঘরে ব্যবহার করতে পারেন । উদাহরণস্বরূপ "সেলপ্যাডিং" এর 10px:

td { 
    padding: 10px;
}

"সেলস্পেসিং" এর জন্য, আপনি border-spacingনিজের টেবিলটিতে CSS সম্পত্তি প্রয়োগ করতে পারেন । যেমন "সেলস্পেসিং" এর 10px এর জন্য:

table { 
    border-spacing: 10px;
    border-collapse: separate;
}

এই বৈশিষ্ট্যটি এমনকি পৃথক অনুভূমিক এবং উল্লম্ব ব্যবধানের অনুমতি দেবে, এমন কিছু যা আপনি পুরানো-স্কুল "সেলস্পেসিং" দিয়ে করতে পারেননি।

IE <= 7 এ সমস্যা

এটি ইন্টারনেট এক্সপ্লোরার through এর মাধ্যমে ইন্টারনেট এক্সপ্লোরার ব্যতীত প্রায় সকল জনপ্রিয় ব্রাউজারে কাজ করবে, যেখানে আপনি প্রায় ভাগ্যের বাইরে এসেছেন। আমি "প্রায়" বলি কারণ এই ব্রাউজারগুলি এখনও border-collapseসম্পত্তি সমর্থন করে , যা সংলগ্ন টেবিল কোষের সীমানাকে মার্জ করে। যদি আপনি সেলস্পেসিং (অর্থাৎ, cellspacing="0") মুছে ফেলার চেষ্টা করছেন তবে border-collapse:collapseতার একই প্রভাব হওয়া উচিত: টেবিলের ঘরগুলির মধ্যে কোনও স্থান নেই। এই সমর্থনটি বগি, যদিও cellspacingএটি সারণী উপাদানটিতে বিদ্যমান কোনও HTML বৈশিষ্ট্যকে ওভাররাইড করে না ।

সংক্ষেপে: অ-ইন্টারনেট এক্সপ্লোরার 5-7 ব্রাউজারগুলির জন্য, border-spacingআপনাকে পরিচালনা করে। ইন্টারনেট এক্সপ্লোরারের জন্য, যদি আপনার পরিস্থিতি ঠিক ঠিক থাকে (আপনি 0 সেলস্পেসিং চান এবং আপনার টেবিলটি ইতিমধ্যে এটি সংজ্ঞায়িত করা নেই), আপনি ব্যবহার করতে পারেন border-collapse:collapse।

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

নোট: সিএসএস বৈশিষ্ট্য জন্য একটি দুর্দান্ত ওভারভিউ যে এক টেবিল এবং কোন ব্রাউজার জন্য আবেদন করতে পারেন, এই দেখুন কল্পনাপ্রসূত Quirksmode পৃষ্ঠা ।

Comments

সেলপ্যাডিং = "0" ক্রোম 13.0.782.215 এ এখনও পার্থক্য আনতে পারে, এমনকি যদি সীমান্ত-পতন: পতন এবং সীমানা-ব্যবধান টেবিলে প্রয়োগ করা হয়।

— হোয়াইটনিল্যান্ড

আপনার লাইভ হিটনি আপনার টেবিল কোষে প্যাডিং সেট করতে হবে: 0

— মার্টিন আর্দিং-থমসেন

এটি সামান্য সামান্য বিষয়, তবে সেলপ্যাডিং এবং সেলস্পেসিং বৈশিষ্ট্য এইচটিএমএল 5 এ সরানো হয়েছে, তাই এখনই যাওয়ার একমাত্র উপায় সিএসএস।

— Ignas2526

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

— এরিক এনগুইন

সত্য, @ বাপকুই, আপনি যে কোনও অসীম পরিবর্তনশীল অন্যান্য পরিস্থিতিতে টেবিল স্টাইল করতে পারেন, আপনাকে আরও নির্দিষ্ট নির্বাচক সংজ্ঞায়িত করতে হবে। উপরোক্ত উদাহরণ হিসাবে চিহ্নিত করা হয়।

— এরিক এনগুইন

Answer 2

ডিফল্ট

ব্রাউজারের ডিফল্ট আচরণ সমান:

table {border-collapse: collapse;}
td    {padding: 0px;}

         

Cellpadding

ঘরের পরিমাণ এবং ঘরের প্রাচীরের মধ্যে স্থানের পরিমাণ নির্ধারণ করে

table {border-collapse: collapse;}
td    {padding: 6px;}

        

Cellspacing

টেবিল কোষগুলির মধ্যে স্থান নিয়ন্ত্রণ করে

table {border-spacing: 2px;}
td    {padding: 0px;}

        

উভয়

table {border-spacing: 2px;}
td    {padding: 6px;}

        

উভয় (বিশেষ)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

        

দ্রষ্টব্য: যদি border-spacingসেট করা থাকে তবে border-collapseএটি টেবিলের সম্পত্তি নির্দেশ করে separate।

এটি নিজে চেষ্টা করো!

এটি অর্জনের পুরানো এইচটিএমএল উপায় আপনি এখানে পাবেন।

Comments

টেবিলের চারপাশের ব্যবধানটি কীভাবে অদৃশ্য হয়ে যাচ্ছে? আমি যখন "বর্ডার-স্পেসিং: 8px 12px সেট করি তখন এটি কেবল টেবিলের সীমানা এবং বাইরের কক্ষগুলির মধ্যেই ব্যবধান যোগ করে! তবে এখানে চিত্রগুলিতে এটি চিত্রিত হয় না; সেগুলি বামে ফেলে রাখা হয়েছে।

— কাজ

@ 2astalavista এবং দুর্ভাগ্যক্রমে কেউ যদি বাহ্য ব্যবধানের মোছার প্রভাব চায় তবে এটি এই সিএসএস বৈশিষ্ট্যগুলির সাথে এইভাবে কাজ করবে না।

— কাজ

@ কাজ আপনি সেই বিরক্তিকর অংশটি লুকানোর জন্য নেতিবাচক মার্জিন ব্যবহার করতে পারেন।

টিডিতে ডিফল্ট প্যাডিং সাধারণত 1px হয়, 0

— জানুয়ার এম

Answer 3

table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

Comments

এটি কেবলমাত্র আমার পক্ষে কাজ করতে পারা যায়, তবে অতিরিক্ত সাধারণ হওয়া থেকে বাঁচতে আমি কোনও আইডিতে তথ্য প্রয়োগ করেছিলাম।

— Kzqai

এটা cellspacing=0সমতুল্য। এর সমতুল্য cellspacing=1সম্পূর্ণ আলাদা। গৃহীত উত্তর দেখুন।

— TRIG

table tdএবং table thশুধু tdএবং thযথাক্রমে হওয়া উচিত নয় ? এটি যে কোনও উপায়ে কাজ করে তবে একটি ছোট নির্বাচক মানে কিছুটা দ্রুত ম্যাচিং

— কোল জনসন

@ কোল আসলে, আমি মনে করি এটি হওয়া উচিত table > tr > tdএবং table > tr > th। এটি প্রায় তত দ্রুত trএবং thআপনার নেস্টেড টেবিল থাকলে এটি কাজ করার গ্যারান্টিযুক্ত। সবেমাত্র আমার 2 সি

— লিবিয়াথনবাদে

@ উপরের ইউ০০ কিন্তু tableনির্বাচকের দরকার কি? আইআইআরসি, এ এর <td>অভ্যন্তরে অবৈধ <tr>।

— কোল জনসন

Answer 4

আমি জানি যতক্ষণ না টেবিল কোষগুলিতে মার্জিন সেট করা আসলেই কোনও প্রভাব ফেলে না। জন্য সত্য সিএসএস সমতুল্য cellspacingহয় border-spacing- কিন্তু এটি ইন্টারনেট এক্সপ্লোরার কাজ করে না।

border-collapse: collapseউল্লিখিত হিসাবে আপনি নির্ভরযোগ্যভাবে সেল স্পেসিং 0 তে সেট করতে ব্যবহার করতে পারেন , তবে অন্য কোনও মানের জন্য আমি মনে করি কেবলমাত্র ক্রস ব্রাউজারটি cellspacingবৈশিষ্ট্যটি ব্যবহার করা keep

Comments

আজকের যুগে সেই বাস্তবতা নবম ডিগ্রির স্তন্যপান।

— জন কে

এটি প্রায় সঠিক, তবে border-collapseটেবিলটিতে ইতিমধ্যে কোনও cellspacingবৈশিষ্ট্য নির্ধারিত না থাকলে কেবলমাত্র আইআই 5-7 এ কাজ করে । আমি একটি বিস্তৃত উত্তর লিখেছি যা সহায়ক এই ক্ষেত্রে এই পৃষ্ঠায় অন্যান্য উত্তরের সমস্ত সঠিক অংশকে মার্জ করে।

— এরিক এনগুইন

সত্যি কথা বলতে কী, ইন্টারনেট এক্সপ্লোরার সম্পর্কে কে পাত্তা দেয়? যে কেউ এটি ব্যবহার করে তাদের ভাঙা ওয়েবসাইটগুলি জানতে হবে - এ জাতীয় নিম্ন মানের ব্রাউজার ব্যবহার করার জন্য fault ওয়েবসাইটগুলিতে এটি মোকাবেলা করা উচিত নয়। ইন্টারনেট এক্সপ্লোরারকে হারিয়ে যেতে দিন। এর জন্য সমর্থন ভুলে যান। আমাদের এটির দরকার নেই এবং এটির জন্য বিকাশ হওয়া বেদনা।

Answer 5

এই হ্যাকটি ইন্টারনেট এক্সপ্লোরার 6 এবং তার পরে, গুগল ক্রোম , ফায়ারফক্স এবং অপেরা :

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

*ঘোষণা ইন্টারনেট এক্সপ্লোরার 6 এবং 7 জন্য, এবং অন্যান্য ব্রাউজার সঠিকভাবে তা উপেক্ষা করবে।

expression('separate', cellSpacing = '10px')রিটার্ন দেয় 'separate', তবে উভয় বিবৃতি চালিত হয়, যেমন জাভাস্ক্রিপ্টে আপনি প্রত্যাশার চেয়ে বেশি যুক্তি পাস করতে পারেন এবং সেগুলির সমস্ত মূল্যায়ন করা হবে।

Comments

প্রতিক্রিয়াশীল ইমেলগুলি চেষ্টা করার জন্য, নোট করুন যে * আউটলুক 2007+ দ্বারা স্বীকৃত নয় (রেন্ডার ইঞ্জিন হিসাবে শব্দটি ব্যবহার করে) প্রচারাভিযাত্রী

— সিএসএস

Answer 6

যারা নন-শূন্য সেলস্যাক্সিংয়ের মান চান তাদের জন্য, নিম্নলিখিত সিএসএস আমার পক্ষে কাজ করেছে, তবে আমি কেবল এটি ফায়ারফক্সে পরীক্ষা করতে সক্ষম।

সামঞ্জস্যতা বিশদ জন্য অন্য কোথাও পোস্ট করা Quirksmode লিঙ্ক দেখুন । মনে হচ্ছে এটি পুরানো ইন্টারনেট এক্সপ্লোরার সংস্করণগুলির সাথে কাজ না করে।

table {
    border-collapse: separate;
    border-spacing: 2px;
}

Answer 7

এই সমস্যার সহজ সমাধান হ'ল:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

Answer 8

এছাড়াও, আপনি চাইলে আপনার স্টাইলশিটে cellspacing="0"যুক্ত করতে ভুলবেন না ।border-collapse: collapsetable

Answer 9

একটি ডিভের সাথে ঘরের সামগ্রীগুলি মোড়ানো করুন এবং আপনি যা কিছু করতে পারেন তা করতে পারেন তবে অভিন্ন প্রভাব পেতে আপনাকে প্রতিটি কলাম একটি কলামে মোড়তে হবে। উদাহরণস্বরূপ, কেবল বৃহত্তর বাম এবং ডান মার্জিন পেতে:

তাই সিএসএস হবে,

div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}

<table border="0">
  <tr>
    <td class="tight">
      <div class="cellwidener">My content</div>
    </td>
  </tr>
</table>

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

Comments

আমি আশা করি আমি আরও উঁচুতে পারব ... প্রথম উদাহরণ যা অন্যকে পুনরাবৃত্তি করেনি এবং এমন একটি যা পৃষ্ঠার সমস্তটির পরিবর্তে কীভাবে প্রভাবকে একটি একক টেবিল বা ঘরের মধ্যে সীমাবদ্ধ রাখতে পারে তা দেখায় !!!

— vapcguy

Answer 10

শুধু ব্যবহার border-collapse: collapseআপনার টেবিল জন্য, এবং paddingজন্য thবা td।

Answer 11

এই স্টাইলটি টেবিলগুলির জন্য পুরো রিসেটের জন্য রয়েছে - সেলপ্যাডিং , সেলস্পেসিং এবং সীমানা ।

আমার রিসেট.এসএস ফাইলটিতে এই স্টাইলটি ছিল:

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px; /* Replace cellpadding */
}

Answer 12

Tbh। সিএসএসের চারপাশের সমস্ত ফ্যানিংয়ের জন্য আপনি কেবলমাত্র ব্যবহার cellpadding="0" cellspacing="0"করতে পারেন যেহেতু সেগুলি হ্রাস করা হয়নি ...

মার্জিনের প্রস্তাব দেওয়া অন্য যে কেউ <td>স্পষ্টতই এটি চেষ্টা করেন নি।

Comments

এগুলি আসলে এইচটিএমএল 5 এ অবমূল্যায়ন করা হয়েছে।

— Kzqai

Answer 13

table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}

Answer 14

টেবিলের ডেটা সহ কেবল সিএসএস প্যাডিংয়ের নিয়ম ব্যবহার করুন:

td { 
    padding: 20px;
}

এবং সীমানার ব্যবধানের জন্য:

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

যাইহোক, এটি বক্স মডেলের ভিন্ন প্রয়োগের কারণে এটি ইন্টারনেট এক্সপ্লোরারের মতো পুরানো সংস্করণে সমস্যা তৈরি করতে পারে।

Answer 15

আমি ডাব্লু 3 সি শ্রেণিবদ্ধতা থেকে যা বুঝতে পারি তা হ'ল <table>কেবলমাত্র 'ডেটা' প্রদর্শন করার জন্য।

এর উপর ভিত্তি করে আমি <div>পটভূমি এবং এটির সাথে একটি তৈরি করা position: absolute;এবং এটি ব্যবহার করে এবং এর উপর দিয়ে ভাসমান ডেটা সহ একটি টেবিল পাওয়া খুব সহজ পেয়েছি background: transparent;...

এটি ক্রোম, ইন্টারনেট এক্সপ্লোরার (6 এবং তারপরে) এবং মজিলা ফায়ারফক্সে (2 এবং তার পরে) কাজ করে।

মার্জিন ব্যবহার করা হয় (অথবা কোন পথে বোঝানো) ধারক উপাদান, মত মধ্যে একটি স্পেসার তৈরি করতে <table>, <div>এবং <form>, না <tr>, <td>, <span>বা <input>। ধারক উপাদান ছাড়া অন্য যে কোনও কিছুর জন্য এটি ব্যবহার করা আপনাকে ভবিষ্যতের ব্রাউজার আপডেটের জন্য আপনার ওয়েবসাইটকে সামঞ্জস্য করতে ব্যস্ত রাখবে।

Comments

ওপি কখনই সে টেবিল ব্যবহার করছিল তা জানায়নি।

— আলফাব্রাভো

Answer 16

সিএসএস:

selector{
    padding:0 0 10px 0; // Top left bottom right 
}

Answer 17

আপনি সিএসএস প্যাডিংয়ের বৈশিষ্ট্যটি ব্যবহার করে টেবিলের ঘরে সহজেই প্যাডিং সেট করতে পারেন। এটি টেবিলের সেলপ্যাডিং বৈশিষ্ট্যের মতো একই প্রভাব তৈরি করার একটি বৈধ উপায়।

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

table th,
table td {
  padding: 10px;
  /* Apply cell padding */
}

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellpadding in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[e-mail]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

একইভাবে, আপনি সেলসস্পেসিং অ্যাট্রিবিউটের মতো সংলগ্ন টেবিল ঘরের সীমানার মধ্যে ব্যবধান প্রয়োগ করতে CSS সীমান্ত-ব্যবধানের বৈশিষ্ট্যটি ব্যবহার করতে পারেন। যাইহোক, সীমান্ত-ব্যবধান কাজ করার জন্য সীমান্ত-পতনের সম্পত্তি মানচিত্রের মান পৃথক করুন, এটি ডিফল্ট।

table {
  border-collapse: separate;
  border-spacing: 10px;
  /* Apply cell spacing */
}

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

table th,
table td {
  padding: 5px;
  /* Apply cell padding */
}

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellspacing in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[e-mail]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

Answer 18

এটা চেষ্টা কর:

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

অথবা এটি চেষ্টা করুন:

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

Answer 19

আমি !importantসীমান্ত-ধসের পরে যেমন ব্যবহার করেছি

border-collapse: collapse !important;

এবং এটি আই 7 এ আমার জন্য কাজ করে। এটি সেলস্পেসিং বৈশিষ্ট্যটিকে ওভাররাইড করে বলে মনে হচ্ছে।

Comments

!importantকোনও জটিল পরিস্থিতিতে (এবং তারপরেও বেশিরভাগ ক্ষেত্রে একটি ভুল পদ্ধতির) জন্য অন্য সিএসএস সেটিংসকে ওভাররাইড করার প্রয়োজন হবে ।

— জুলকা কে। কোরপেলা

ড্যানের উত্তরের পুনরাবৃত্তি, কেবল যুক্ত করে !important, যা অন্য উত্তরের পরিবর্তে মন্তব্য হিসাবে অন্তর্ভুক্ত থাকতে পারে।

— vapcguy

Answer 20

<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

cell-paddingpaddingসিএসএসে দেওয়া যেতে পারে যখন টেবিলের জন্য cell-spacingসেট করে সেট border-spacingকরা যায়।

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

বেহালার ।

Answer 21

td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}

যদি marginকাজ না করে, সেট করার চেষ্টা displayএর trজন্য blockএবং তারপর মার্জিন কাজ করবে।

Answer 22

টেবিলগুলির জন্য, সেলস্পেসিং এবং সেলপ্যাডিং এইচটিএমএল 5 এ অপ্রচলিত।

সেলস্পেসিংয়ের জন্য এখন আপনাকে সীমান্তের ব্যবধান ব্যবহার করতে হবে। এবং সেলপ্যাডিংয়ের জন্য আপনাকে সীমান্ত-পতন ব্যবহার করতে হবে।

এবং নিশ্চিত করুন যে আপনি এটি আপনার HTML5 কোডে ব্যবহার করছেন না use এই মানগুলি সর্বদা একটি সিএসএস 3 ফাইলে ব্যবহার করার চেষ্টা করুন।

Answer 23

table {
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 
}
td {
    padding-left: 4px;
}

Answer 24

এইচটিএমএল সারণিতে, cellpaddingএবং cellspacingএটি সেট করা যেতে পারে:

জন্য সেল প্যাডিং :

শুধু সাধারণ td/thসেল কল করুন padding।

উদাহরণ:

/******Call-Padding**********/

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

<table>
        <tr>
            <th>Head1 </th>
            <th>Head2 </th>
            <th>Head3 </th>
            <th>Head4 </th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

জন্য সেল ব্যবধান

সহজ কল করুন table border-spacing

উদাহরণ:

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

<table>
        <tr>
            <th>Head1</th>
            <th>Head2</th>
            <th>Head3</th>
            <th>Head4</th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

সিএসএস উত্স লিঙ্ক দ্বারা আরও টেবিল শৈলী এখানে আপনি CSS দ্বারা আরও টেবিল শৈলী পাবেন ।

Answer 25

আপনি নিজের সিএসএসে ব্যবহার করে border-spacingএবং padding:

table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}

<table>
  <tr>
    <th>head_1</th>
    <th>head_2</th>
    <th>head_3</th>
    <th>head_4</th>
  </tr>
  <tr>
    <td>txt_1</td>
    <td>txt_2</td>
    <td>txt_3</td>
    <td>txt_4</td>
  </tr>
</table>

Comments

সীমানা-ফাঁক হওয়ার নিয়মটি যখন বর্ডারগুলি ভেঙে ফেলা হয় তখন এড়ানো হবে।

— dgrogan

Answer 26

স্টাইলটি সরাসরি টেবিলের সাথে যুক্ত করার বিষয়ে কীভাবে? এটি tableআপনার সিএসএসে ব্যবহার করার পরিবর্তে যা আপনার পৃষ্ঠায় একাধিক টেবিল থাকলে: এটি একটি বিএডি পদ্ধতির:

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>

Comments

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

— তিপিম্ম

কিছুই যোগ করা হয়নি ?! আমি যা যুক্ত করেছিলাম তা হল এখানে প্রতিটি অন্যান্য উত্তর কীভাবে মূলত ব্যবহার করতে বলে td { padding: ... }বা table { border-spacing: ... }তার পরিবর্তে সরাসরি টেবিলটিতে প্রয়োগ করার পরিবর্তে এটি ফোকাস করা । যারা কিছুই যোগ করে। আমি যেমন বলেছি, যখন আপনার পৃষ্ঠায় একাধিক টেবিল রয়েছে এবং সেগুলি প্রভাবিত করতে চান না, আপনি এটি চান না! "স্টাইলশিটটি ব্যবহার করুন!" বলে আমাদের উত্তরগুলির পুরো পৃষ্ঠার প্রয়োজন হবে না, যখন আপনি এটিই চান শেষ জিনিস, কারণ আপনি কেবল একটি ঘর বা টেবিলের জন্য বিন্যাস চান। এটি যখন প্রয়োগ করা হয় tableবা tdঅযাচিত হয় এবং এর জন্য সম্পূর্ণ নতুন ক্লাস তৈরি করা ওভারকিল is

— vapcguy

অন্য প্রতিটি উত্তর একটি স্টাইলশিট ব্যবহার করে কারণ মূল প্রশ্নটি ছিল "আমি কীভাবে CSS এর সাথে এটি করতে পারি" do যদি প্রশ্নটি "আমি কীভাবে কেবলমাত্র এই এক টেবিলকে সিএসএস করতে পারি" তা যদি হয়ে থাকে তবে আপনার উত্তরটি আরও উপযুক্ত হবে (যদিও আমি এখনও সমর্থন করব table#someId)।

— তেপীম্ম

প্রযুক্তিগতভাবে, ইনলাইন স্টাইলিংটি এখনও সিএসএস, কেবল স্টাইলশিট ব্যবহার করে না, তবে আমি আপনার বক্তব্যটি পেয়েছি।

— vapcguy

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

— vapcguy

Answer 27

আমি এটির পরামর্শ দিচ্ছি এবং নির্দিষ্ট টেবিলের জন্য সমস্ত কক্ষগুলি প্রভাবিত।

table.tbl_classname td, th {
    padding: 5px 5px 5px 4px   ;
 }

Answer 28

আপনি নীচের কোডটি কেবল একটি তৈরি করে index.htmlচালাতে পারেন।

<!DOCTYPE html>
<html>
   <head>
      <style>
         table{
         border-spacing:10px;
         }
         td{
         padding:10px;
         }
      </style>
   </head>
   <body>
      <table cellspacing="0" cellpadding="0">
         <th>Col 1</th>
         <th>Col 2</th>
         <th>Col 3</th>
         <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
         </tr>
      </table>
   </body>
</html>

আউটপুট: