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()의 괄호안에 몇번째 칼럼을 보이지 않게 할지를 지정해 주면된다.
댓글 없음:
댓글 쓰기