반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title>Document</title>
<style>
div {
border-style:solid;
}
</style>
</head>
<body>
<div class="con" style="display:table; width:800px;">
<div style="display:table-row">
<div class ="A" style="display:table-cell">A</div>
<div class ="B" style="display:table-cell">B</div>
<div class ="C" style="display:table-cell">C</div>
<div class ="D" style="display:table-cell">D</div>
</div>
<div style="display:table-row">
<div class ="A" style="display:table-cell">A</div>
<div class ="B" style="display:table-cell">B</div>
<div class ="C" style="display:table-cell">C</div>
<div class ="D" style="display:table-cell">D</div>
</div>
</div>
</body>
</html>table 말 그대로 table형식으로 보여지게 만듭니다.
table-row는 tr의 기능을하고
table-cell은 td의 기능을 합니다.
반응형
'[HTML && CSS] > [CSS]' 카테고리의 다른 글
| [CSS] DIV 원하는 곳에 배치시키기 Position (relative , absolute, fixed) (0) | 2021.07.10 |
|---|---|
| [CSS] visibility:hidden vs display:none (0) | 2021.07.01 |
| [CSS] border에 넓이 포함시키지 않기 box-sizing (서로 다른 div 크기 [Border]) (0) | 2021.06.26 |
| [CSS] 외부 CSS HTML에서 호출하기 (link rel="stylesheet" href="") (0) | 2021.06.26 |
| [CSS] CSS 강제 적용시키기 !important (0) | 2021.06.26 |