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> 출력
이것은 다음 출력을 제공합니다 -
