html/css - table 구조에서 열(column)단위로 숨기기
2023. 7. 15. 21:17ㆍ카테고리 없음
반응형
!DOCTYPE html>
<html>
<head>
<style>
.hidden-col { display: none; }
</style>
</head>
<body>
<table>
<colgroup>
<col width="100"/>
<col width="200"/>
</colgroup>
<tbody>
<tr>
<td>첫번째</td>
<td class="hidden-col">두번째</td>
</tr>
<tr>
<td>첫번째</td>
<td class="hidden-col">두번째</td>
</tr>
</tbody>
</table>
</body>
</html>
위와 같이 쓰게 되면 두번째 열 모두 숨겨진다.
* 참고사항 )
IE에 한해서 버전에 따라 display: none이 되는 놈이 있고 visibility: collpase;가 되는 놈이 있는데,
두개 다 쓰면 IE 8을 제외하고는 다 된다고 한다.
반응형