Thuộc tính CSS table-layout là xác định thuật toán được trình duyệt sử dụng để sắp xếp các hàng, cột và ô của bảng. Thông qua đó, bạn có thể kiểm soát bố cục bảng.
Cú pháp
Cú pháp của thuộc tính bố cục bảng CSS như sau -
Selector { table-layout: /*value*/ }
Các ví dụ sau minh họa thuộc tính bố cục bảng CSS -
Ví dụ
<!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>
Đầu ra
Điều này cho kết quả sau -
Ví dụ
<!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>
Đầu ra
Điều này cho kết quả sau -