표 크기 고정시키는 방법
표(table)는 width 속성으로 가로 크기를 정할 수 있습니다.
다음은 가로 크기가 250px인 간단한 표입니다.
표 안의 내용이 길면 줄바꿈되면서 크기를 유지합니다.
<table>
<tr>
<td>Hello</td>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</td>
</tr>
</table>
table {
width: 250px;
}
td {
padding: 10px;
border: 1px solid #666666;
}
하지만, 몇몇 상황에서는 표가 커집니다.
예를 들어 <td> 요소에
white-space: nowrap;
를 적용시키면 줄바꿈이 되지 않고 표가 커집니다.
table {
width: 250px;
}
td {
padding: 10px;
border: 1px solid #666666;
white-space: nowrap;
}
표 크기를 고정하고 싶다면 table-layout 속성을 사용합니다.
값을 table-layout: fixed;로 정하면 표의 크기가 커지지 않습니다.
table {
width: 250px;
table-layout: fixed;
}
td {
padding: 10px;
border: 1px solid #666666;
white-space: nowrap;
}