CSS border-collapse প্রপার্টি নির্দিষ্ট করে <table> এলিমেন্টগুলো শেয়ার্ড বা সেপারেট বর্ডার থাকবে কিনা। এটি دوটি মান নিতে পারে: separate এবং collapse।
সিনট্যাক্স
CSS border-collapse প্রপার্টির সিনট্যাক্স নিচের মতো:
Selector { border-collapse: /*value*/ }
নিচের উদাহরণগুলো CSS border-collapse ব্যাখ্যা করে:
উদাহরণ
<!DOCTYPE html> <html> <head> <style> #cdemo { border-collapse: collapse; } #sdemo { border-collapse: separate; } table { display: inline-table; margin: 30px; } th,td { border: 3px ridge orange; } td { border-color: red; } caption { box-shadow: 0px -5px 4px 3px green; } </style> </head> <body> <h2>Employee Records</h2> <table id="sdemo"> <caption> Employee Details (Separate Border) </caption> <tr> <th>Employee</th> <th>Department</th> </tr> <tr> <td>Tim</td> <td>Operations</td> </tr> <tr> <td>Nathan</td> <td>Finance</td> </tr> <tr> <td>John </td> <td>Marketing</td> </tr> </table> <table id="cdemo"> <caption> Employee Details (Collapse Border) </caption> <tr> <th>Employee</th> <th>Department</th> </tr> <tr> <td>Tim</td> <td>Operations</td> </tr> <tr> <td>Nathan</td> <td>Finance</td> </tr> <tr> <td>John </td> <td>Marketing</td> </tr> </table> </body> </html>
আউটপুট
উপরোক্ত কোডের আউটপুট:
উদাহরণ
<!DOCTYPE html> <html> <head> <style> table { border-collapse: separate; empty-cells: hide; display: inline-table; margin: 30px; } table+table { border-collapse: collapse; empty-cells: hide; } td { border: 3px ridge lightblue; } caption { box-shadow: 0px -5px 4px 3px grey; } </style> </head> <body> <h2>Demo Tables</h2> <table> <caption>Demo caption</caption> <tr> <td>demo</td> <td>demo</td> </tr> <tr> <td>demo</td> <td>demo</td> </tr> <tr> <td>demo</td> <td>demo</td> <td></td> </tr> </table> <table> <caption>Demo caption</caption> <tr> <td>demo</td> <td>demo</td> </tr> <tr> <td>demo</td> <td>demo</td> </tr> <tr> <td>demo</td> <td>demo</td> <td></td> </tr> </table> </body> </html>
আউটপুট
উপরোক্ত কোডের আউটপুট:
