CSS empty-cells प्रॉपर्टी का उपयोग टेबल के खाली सेल्स के प्रदर्शन को निर्दिष्ट करने के लिए किया जाता है। CSS empty-cells प्रॉपर्टी का सिंटैक्स निम्नानुसार है:
सिंटैक्स
Selector { empty-cells: /*value*/ }
उदाहरण
निम्नलिखित उदाहरण 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>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
