CSS table-layout प्रॉपर्टी ब्राउज़र द्वारा टेबल की पंक्तियों, कॉलम्स और सेल्स को लेआउट करने के लिए उपयोग किए जाने वाले एल्गोरिदम को परिभाषित करने के लिए है। इसके माध्यम से, आप टेबल लेआउट को नियंत्रित कर सकते हैं।
सिंटैक्स
CSS table-layout प्रॉपर्टी का सिंटैक्स निम्नानुसार है:
Selector { table-layout: /*value*/ }
निम्नलिखित उदाहरण CSS table-layout प्रॉपर्टी को दर्शाते हैं:
उदाहरण
<!DOCTYPE html> <html> <head> <style> table { margin: 2em; display: inline-block; border: 1px solid black; } td { border: 1px solid black; } #one { table-layout: auto; width: auto; } #one + table { table-layout: fixed; width: 100px; } </style> </head> <body> <h2>Table Layouts and its working in CSS</h2> <table id="one"> <caption>Cricketers</caption> <tr> <td>ShaneWarne</td> </tr> <tr> <td></td> <td>Adam</td> </tr> <tr> <td></td> <td>Shimron Hetmyer</td> <td></td> </tr> </table> <table> <caption>Cricketers</caption> <tr> <td>ShaneWarne</td> </tr> <tr> <td></td> <td>Adam</td> </tr> <tr> <td></td> <td>Shimron Hetmyer</td> <td></td> </tr> </table> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
दूसरा उदाहरण
<!DOCTYPE html> <html> <head> <style> div { margin: auto; width: 50%; box-shadow: inset 0 0 14px orange; } td { box-shadow: inset 0 0 5px lime; white-space: nowrap; outline: thin dotted; } table { border: 3px solid black; table-layout: fixed; width: 100%; } </style> </head> <body> <div> <table> <caption>Demo Caption</caption> <tr> <td>ABCD</td> </tr> <tr> <td></td> <td>EFGH</td> </tr> <tr> <td></td> <td>IJKLM NOPQRST</td> <td></td> </tr> </table> </div> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
