CSS empty-cells প্রপার্টি একটি টেবিলের খালি সেলের প্রদর্শন নির্দিষ্ট করতে ব্যবহৃত হয়। CSS empty-cells প্রপার্টির সিনট্যাক্স নিম্নরূপ:
সিনট্যাক্স
Selector { empty-cells: /*মান*/ }
উদাহরণ
নিচের উদাহরণগুলো CSS empty-cells প্রপার্টি উদাহরণ দেয়:
<!DOCTYPE html> <html> <head> <style> table, table * { border: groove; } table { display: inline-block; } #demo1 { empty-cells: show; } #demo2 { empty-cells: hide; } </style> </head> <body> <h2>Demo Heading</h2> <table id="demo1"> <tr> <th colspan="3">Demo</th> </tr> <tr> <td>One</td> <td>Two</td> <td>Three</td> </tr> <tr> <td></td> <td></td> <td>Six</td> </tr> <tr> <td></td> <td>Eight</td> <td></td> </tr> </table> <table id="demo2"> <tr> <th colspan="3">Demo</th> </tr> <tr> <td>One</td> <td>Two</td> <td>Three</td> </tr> <tr> <td></td> <td></td> <td>Six</td> </tr> <tr> <td></td> <td>Eight</td> <td></td> </tr> </table> </body> </html>
আউটপুট
এটি নিচের আউটপুট দেয়:
আরেকটি উদাহরণ
<!DOCTYPE html> <html> <head> <style> table * { border: ridge skyblue; padding: 0.5rem; } table { margin: 20px; display: inline-block; box-shadow: 0 0 6px 3px green; } #demo1 { empty-cells: hide; } #demo2 { empty-cells: show; } </style> </head> <body> <table id="demo1"> <tr> <th colspan="3">Hide</th> </tr> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> <table id="demo2"> <tr> <th colspan="3">Show</th> </tr> <tr> <td></td> <td></td> </tr> </tr> <tr> <td></td> <td></td> </tr> </tr> <tr> <td></td> <td></td> </tr> </table> </body> </html>
আউটপুট
এটি নিচের আউটপুট দেয়:
