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



html-table alignment (21)

একটি HTML টেবিলের মধ্যে, cellpadding এবং cellspacing সেট করা যেতে পারে:

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

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


Answer #1

একটি div দিয়ে কোষের বিষয়বস্তু মোড়ানো এবং আপনি যা করতে চান তা করতে পারেন, তবে আপনাকে একটি অভিন্ন প্রভাব পেতে কলামে প্রতিটি ঘর মোড়ানোতে হবে। উদাহরণস্বরূপ, শুধুমাত্র বৃহত্তর বাম এবং ডান মার্জিন পেতে:

সুতরাং সিএসএস হবে,

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>

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


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

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

Answer #3

এই শৈলী টেবিল জন্য পূর্ণ রিসেট জন্য হয় - সেলপ্যাডিং , সেলসপেসিং এবং সীমানা

আমি আমার reset.css ফাইল এই শৈলী ছিল:

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 #4
table{border-spacing:4px; color: #000; background:#ccc; }
td{padding-left:4px;}

Answer #5

কিভাবে টেবিল নিজেই সরাসরি স্টাইল যোগ সম্পর্কে? এটি আপনার সিএসএসের table ব্যবহার করার পরিবর্তে, যদি আপনার পৃষ্ঠায় একাধিক সারণি থাকে তবে এটি একটি বিএডি পদ্ধতির:

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

Answer #6

টেবিলের কোষগুলিতে মার্জিনগুলি নির্ধারণ করা পর্যন্ত আমার কোন প্রভাব নেই। cellspacing জন্য আসল CSS সমতুল্য border-spacing - তবে এটি Internet Explorer এ কাজ করে না।

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


Answer #7

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

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

Answer #8

সিএসএস:

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

Answer #9

ডিফল্ট

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

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

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

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


Answer #10

আমি সীমান্ত ধসে পড়ার পর !important

border-collapse: collapse !important;

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


Answer #11

Tbh। সিএসএসের সাথে প্রায় সব fannying জন্য আপনি পাশাপাশি cellpadding="0" cellspacing="0" কারণ তারা cellspacing="0" হয় না ...

<td> এর মার্জিনগুলি সুপারিশকারী যে কেউ অন্যথায় এটি চেষ্টা করে নি।


Answer #12

বুনিয়াদি

CSS এ "সেলপ্যাডিং" নিয়ন্ত্রণ করার জন্য, আপনি কেবল টেবিলের কোষগুলিতে padding ব্যবহার করতে পারেন। যেমন "সেলপ্যাডিং" এর 10px এর জন্য:

td { 
    padding: 10px;
}

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

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

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

IE <= 7 এ সমস্যা

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

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

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

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


Answer #13

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

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' , তবে উভয় বিবৃতিগুলি চালানো হয়, যেমন জাভাস্ক্রিপ্টে আপনি প্রত্যাশার চেয়ে আরো আর্গুমেন্টগুলি পাস করতে পারেন এবং তাদের সবগুলি মূল্যায়ন করা হবে।


Answer #14

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

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>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

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

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>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>


Answer #15

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

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


Answer #16
<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-padding CSS- এ padding দ্বারা দেওয়া যেতে পারে যখন cell-spacing টেবিলের জন্য border-spacing নির্ধারণ করে সেট করা যেতে পারে।

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

Fiddle


Answer #17

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

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

Answer #18

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


Answer #19

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

td { 
    padding: 20px;
}

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

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

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


Answer #20

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

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

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

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

Answer #21

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





alignment