বৈশিষ্ট্য border-collapse

border-collapse বৈশিষ্ট্যটি td সেলগুলির মধ্যে বা th সেলগুলির মধ্যে ডবল সীমানাগুলিকে HTML টেবিলের (এবং সেলের সীমানা এবং টেবিল本身的 সীমানার মধ্যে) একক সীমানায় পরিণত করে।

এই বৈশিষ্ট্যটি শুধুমাত্র টেবিলের জন্য এবং display table বা inline-table মান সহ উপাদানগুলির জন্য প্রযোজ্য। সাধারণ ব্লক এলিমেন্টের জন্য এটি, দুর্ভাগ্যবশত, কাজ করবে না। মনে রাখবেন, এটি প্রয়োগ করা উচিত টেবিলের জন্য, এর সেলগুলির জন্য নয়।

সিনট্যাক্স

cssসিলেক্টর {
  border-collapse: collapse | separate;
}

মান

ডিফল্ট মান: separate।

উদাহরণ . separate মান

বর্তমানে টেবিলে সমস্ত সীমানা ডবল (সীমানা সেল এবং টেবিল উভয়ের জন্য নির্ধারিত):

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

csstable {
  border-collapse: separate;
  width: 400px;
  border-spacing: 0;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

উদাহরণ . separate মান

এবং এখন সীমানা সেলগুলির জন্য নির্ধারিত, কিন্তু টেবিল本身的 জন্য নির্ধারিত নয়। যেখানে দুটি সেলের একটি সাধারণ সীমানা রয়েছে, - সেখানে সীমানা ডবল হবে, অন্য জায়গায় - একক:

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

csstable {
  border-collapse: separate;
  width: 400px;
  border-spacing: 0;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат:

উদাহরণ . collapse মান

এখন টেবিলের সমস্ত সীমানা সংকুচিত হবে এবং 1px পুরুত্বের মতো দেখাবে, যেমন ইচ্ছা ছিল:

html<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

csstable {
  border-collapse: collapse;
  width: 400px;
  border: 1px solid red;
}
td {
  border: 1px solid red;
  text-align: center;
}

Результат: