CSS table-layout 속성은 테이블의 행, 열 및 셀을 레이아웃하기 위해 브라우저에서 사용할 알고리즘을 정의하는 것입니다. 이를 통해 테이블 레이아웃을 제어할 수 있습니다.
구문
CSS table-layout 속성의 구문은 다음과 같습니다 -
Selector { table-layout: /*value*/ }
다음 예는 CSS 테이블 레이아웃 속성을 보여줍니다 -
예시
<!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>
출력
이것은 다음 출력을 제공합니다 -