CSS를 이용하여 테이블의 특정 column 보이지 않도록(hidden으로) 처리 하기
--------------------------------------------------
순번 | 이름 | 나이 | 성별 | 주소 | 전화번호 | 기타 |
--------------------------------------------------
...................... 중 략 ..................
위와 같은 테이블이 있다고 할때 코드는 아래와 같은 식이 될 것이다.
<table>
<thead>
<th>순번</th>
<th>이름</th>
<th>나이</th>
<th>성별</th>
<th>주소</th>
<th>전화번호</th>
<th>기타</th>
</thead>
<tr>
<td>순번 정보 표시...</td>
<td>이름 정보 표시...</td>
<td>나이 정보 표시...</td>
<td>성별 정보 표시...</td>
<td>주소 정보 표시...</td>
<td>전화번호 정보 표시...</td>
<td>기타 정보 표시...</td>
</tr>
</table>
이럴 경우 나이 항목(column), 나이 칼럼 전체가 보이지 않도록 즉 |순번|이름|성별|주소|... 와같이 보이도록 해야 할 경우 이를 CSS를 이용하면 아주 간단하게 처리가 된다.
즉 나이 칼럼이 hidden으로 처리되게 하는 것이다. 물론 이때 비록 보이지는 않지만 내부적으로는 나이 칼럼이 존재하고 이 값을 form 전송시 전송한다거나 하는 작업은 정상적으로 이뤄지게 된다.
이럴경우 다음과 같이 처리하면된다.
<head>
... 중 략 ...
<style type="text/css">
... 중 략 ...
th:nth-of-type(3) { display: none; }
td:nth-of-type(3) { display: none; }
... 중 략 ...
</style>
</head>
nth-of-type()의 괄호안에 몇번째 칼럼을 보이지 않게 할지를 지정해 주면된다.
'CSS' 카테고리의 다른 글
| 마우스 포인터 따라다니는 툴팁(Tooltip 말풍선) 만들기 (0) | 2019.07.04 |
|---|---|
| CSS div의 크기 조정에 대해(div의 width, height 속성에 대해) (0) | 2015.11.18 |
| CSS line-height, letter-spacing, word-spacing 속성에 대해 (0) | 2015.11.11 |
| CSS text-align에 대해 (1) | 2015.11.11 |
| CSS에서 가상 클래스(pseudo class)를 이용하여 링크에 마우스 동작 감지하는 법 (0) | 2015.11.06 |