Thuộc tính table-layout trong CSS dùng để định nghĩa thuật toán trình duyệt dùng để bố cục hàng, cột và ô của bả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 CSS table-layout:
Selector { table-layout: /*giá trị*/ }
Các ví dụ sau minh họa thuộc tính CSS table-layout:
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>Bố cục bảng và cách hoạt động trong CSS</h2> <table id="one"> <caption>Cầu thủ bóng đá</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>Cầu thủ bóng đá</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>
Kết quả
Đoạn mã trên cho kết quả sau:
Ví dụ khác
<!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>Chú thích Demo</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>
Kết quả
Đoạn mã trên cho kết quả sau:
