HTML DOM Style borderCollapse প্রপার্টি

borderCollapse প্রপার্টি ব্যবহার করে সেট বা রিটার্ন করা হয় যে <table> এলিমেন্টগুলো শেয়ার্ড বা সেপারেট বর্ডার রাখবে কিনা। এটি দুটি মান নেয়: separate এবং collapse।

সিনট্যাক্স

borderCollapse প্রপার্টি সেট করার সিনট্যাক্স:

object.style.borderCollapse = "separate|collapse|initial|inherit"

মানসমূহ

উদাহরণ

borderCollapse প্রপার্টির উদাহরণ:

<!DOCTYPE html> <html> <head> <style> 
  div { 
    display: flex; 
    float: left; 
  } 
  table { 
    border: 3px solid black; 
  } 
  td { 
    border: 3px solid lightgreen; 
  } 
  th { 
    border: 3px solid lightblue; 
  } 
</style> 
<script> 
  function collapseBorder(){ 
    document.getElementById("t1").style.borderCollapse="collapse"; 
    document.getElementById("Sample").innerHTML="The table borders are now collapsed"; 
  } 
</script> 
</head> 
<body> 
<table id="t1"> 
<tr> <th>FRUITS</th> <th>PRICE </th> </tr> 
<tr> <td>MANGO </td> <td>40</td> </tr> 
<tr> <td>APPLE</td> <td>50</td> </tr> 
</table> 
<p>Collapse the above table borders by clicking the below button</p> 
<button onclick="collapseBorder()">COLLAPSE BORDER</button> 
<p id="Sample"></p> 
</body> </html>

আউটপুট

নিচের আউটপুট তৈরি হবে:

COLLAPSE BORDER বাটনে ক্লিক করলে: