이번 포스팅에서는 테이블에 대해 알아보고 테이블을 꾸며보려고 한다.
우선 간단한 테이블을 만들어보자.
<table>
<thead>
<tr>
<th>학번</th>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>김철수</td>
<td>22</td>
</tr>
<tr>
<td>222</td>
<td>김영희</td>
<td>23</td>
</tr>
</tbody>
</table>
평범한 테이블이 만들어졌다.
테이블을 사용할 때 주의할 점은 테이블은 기본적으로 셀 마다 거리가 존재한다.
table, th, td 태그에 border: 1px solid black;를 입혀보자.
table{
border: 1px solid black;
}
td{
border: 1px solid black;
}
th{
border: 1px solid black;
}
만약 이 셀 간 간격을 없애고 싶다면 border-collapse를 collapse로 주면 된다.
table{
border: 1px solid black;
border-collapse: collapse;
}
깔끔하게 셀 사이 간격이 없어졌다.
그런데 border-collapse 값을 collapse로 설정하면 border-radius를 적용할 수 없다는 단점이 있다.
만약 셀 사이의 간격을 없애고 테이블 테두리도 둥글게 하고 싶다면 두 방법 중 하나를 선택하면 된다.
1. border-spacing 사용
border-collapse는 separate로 두고 border-spacing을 0px로 두면 된다.
참고로 border-collapse는 default 값이 separate이다.
table{
border: 1px solid black;
border-spacing: 0px;
border-radius: 12px;
}
border-radius가 적용이 되었다.
둥근 테두리로 네모난 border가 빠져나와있는 것을 확인할 수 있다.
이 border는 table의 border가 아닌 그 안의 th, td의 border이다.
이를 보고싶지 않다면 테이블에 overflow: hidden을 적용해보자.
모서리가 숨겨졌으나 모서리 부분만 선의 두께가 다르다.
두껍게 보이는 부분은 table의 border와 td, th의 border와 겹쳐서 두껌게
미관상 좋지 않다.
2. table 바깥의 div 태그에 border-radius 적용
테이블의 border-collapse는 collapse로 설정을 해두고 border-radius를 적용하기 위해 table 바깥에 div 태그를 생성한다.
<html 코드>
<div>
<table>
<thead>
<tr>
<th>학번</th>
<th>이름</th>
<th>나이</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>김철수</td>
<td>22</td>
</tr>
<tr>
<td>222</td>
<td>김영희</td></td>
<td>23</td>
</tr>
</tbody>
</table>
</div>
그리고 이 div 태그에 radius와 overflow를 적용하면 된다.
<css 코드>
div{
display: inline-block; /* 내부 테이블 크기에 맞춤 */
border: 1px solid black; /* border 표시 */
border-radius: 12px; /* radius 적용 */
overflow: hidden; /* 넘치는 건 감춤 */
}
table{
border-collapse: collapse;
border-style: hidden; /* 두께 맞추기 위해 border-style 숨김 */
}
th{
border: 1px solid black;
}
td{
border: 1px solid black;
}
테이블의 border-style은 hidden으로 설정해야 div 태그의 border만 보이기 때문에 두께가 일정해진다.
'공부 > 프론트' 카테고리의 다른 글
| [React] useReducer와 Context로 상태값 관리 (0) | 2024.04.22 |
|---|---|
| [html/css/js] 테이블 태그 안에 답글 기능 구현 (0) | 2024.04.06 |
| [html/css] input checkbox 커스텀 이미지 사용하기 (0) | 2024.04.02 |
| [html/css/js] 모달 창 구현 방법 정리 (0) | 2024.03.26 |
| [html/css] input 태그 안에 button 태그 넣기 (0) | 2024.03.25 |