반응형
HTML에서 테이블에 Border-Radius 적용하기
HTML에서 테이블에 border-radius를 적용하는 것은 테이블의 복잡한 구조 때문에 까다로울 수 있습니다. 이 포스트는 HTML과 CSS를 사용하여 테이블 모서리를 둥글게 만드는 효과적인 방법을 안내합니다.
왜 테이블에 직접 Border-Radius를 적용하는 것이 어려운가?
border-radius 속성을 <table> 요소에 직접 적용하면 기대한 대로 렌더링되지 않는 경우가 많습니다. 이는 브라우저에서 테이블을 렌더링하는 방식, 즉 <thead>, <tbody>, <tr> 등 여러 중첩된 요소들 때문에 발생합니다.
해결책: 컨테이너 사용하기
테이블에 border-radius를 적용하는 가장 확실한 방법은 테이블을 컨테이너 요소로 감싸고 이 컨테이너에 border-radius를 적용하는 것입니다. 이 방법은 테이블 모서리가 제대로 둥글게 나타나도록 합니다.
단계별 가이드
- 테이블을 위한 컨테이너 만들기
- 먼저,
div요소로 테이블을 감쌉니다. 이div는 테이블의 컨테이너 역할을 합니다. - 컨테이너와 테이블에 CSS 적용하기
- 컨테이너에
border-radius와overflow: hidden속성을 적용합니다. 테이블에는border-collapse: collapse를 설정하여 테이블 셀 사이의 간격을 제거합니다. - 이중 테두리 방지
th와td요소의 테두리를 조정하여 이중 테두리가 생기지 않도록 합니다.
예제 코드
다음은 이를 구현하는 예제 코드입니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.table-container {
border-radius: 10px;
overflow: hidden;
border: 1px solid #ccc;
display: inline-block; /* 컨테이너 크기가 테이블과 일치하도록 설정 */
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
}
th:first-child, td:first-child {
border-left: none; /* 이중 테두리 제거 */
}
th:last-child, td:last-child {
border-right: none; /* 이중 테두리 제거 */
}
tr:first-child th {
border-top: none; /* 이중 테두리 제거 */
}
tr:last-child td {
border-bottom: none; /* 이중 테두리 제거 */
}
</style>
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>헤더 1</th>
<th>헤더 2</th>
<th>헤더 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>데이터 1</td>
<td>데이터 2</td>
<td>데이터 3</td>
</tr>
<tr>
<td>데이터 4</td>
<td>데이터 5</td>
<td>데이터 6</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>설명
- Border-Radius가 적용된 컨테이너:
.table-containerdiv에border-radius와overflow: hidden을 적용하여 둥근 모서리가 제대로 나타나도록 합니다. - 테이블 스타일링:
table요소에는border-collapse: collapse를 적용하여 셀 간의 간격이 없도록 합니다. - 이중 테두리 제거:
th와td요소의 왼쪽, 오른쪽, 위, 아래 테두리를 적절히 설정하여 이중 테두리를 방지하고 스타일을 깔끔하게 유지합니다.
이 방법을 통해 테이블에 둥근 모서리를 적용할 수 있으며, 레이아웃을 방해하는 간격이나 이중 테두리가 생기지 않습니다.
반응형
'UX 개발 > HTML' 카테고리의 다른 글
| Safari에서 비디오 자동재생하기 (WeBM 파일 포함 필요) (0) | 2024.08.26 |
|---|---|
| HTML 테이블로 이메일용 반응형 레이아웃 구성하기 (No Media Query, 반응형 테이블) (0) | 2019.12.05 |
| 아이프레임(iframe) 높이 자동으로 맞추기 (0) | 2019.10.22 |
| [HTML] 숫자의 자동 링크화 현상 제거 (0) | 2019.08.04 |
