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
'CSS' 카테고리의 다른 글
| [CSS] CSS / Basics / Grammar (0) | 2022.07.27 |
|---|---|
| [CSS] How to apply CSS to HTML (0) | 2022.07.27 |
| [CSS] Switching transition properties such as transition animation (0) | 2022.07.25 |
| [CSS] animation effect (@keyframes) (0) | 2022.07.25 |
| [CSS] animation Various effect application practice! (0) | 2022.07.25 |