CSS
[CSS] table-layout / fixed table size
OOQ
2022. 7. 27. 08:59
728x90
SMALL
css
You can set the horizontal size of the table with the width property. Below is a simple table with a horizontal size of 500 pixels.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
table {
width: 500px;
}
td {
padding: 10px;
border: 1px solid #666666;
}
</style>
</head>
<body>
<table>
<tr>
<td class="c1">HAHAHA</td>
<td class="c2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</td>
</tr>
</table>
</body>
</html>If the content in the table is long, keep the wrap size.
However, in some situations the table will be large. For example, applying white-space: nowrap; to the td element will make the table larger.
td {
padding: 10px;
border: 1px solid #666666;
white-space: nowrap;
}If you want to fix the table size under any circumstances, use the table-layout property. Setting the value to fixed does not increase the size of the table.
table {
width: 500px;
table-layout: fixed;
}
728x90
LIST