caption과 colgroup에 대한 고찰 산유물(마스터K님 제보) 정보
caption과 colgroup에 대한 고찰 산유물(마스터K님 제보)본문
{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}
적용시 position:absolute; 인한 크롬, 사파리에서 width값 미적용 문제
<colgroup>을 사용안하고 <td>에 스타일 적용시 사용가능
{overflow:hidden;margin-left:-9999px;width:1px;height:1px;font-size:0;line-height:0}
최신버전 크롬, 사파리 및 lte ie8, 파폭에서도 width값 적용 및 caption 숨김
<colgroup>에 width값 적용시 사파리 미적용 현상 발생
예제소스) http://sirgle.com/caption_sr_test.php 활용
<![endif]-->
ie 6,7 테스터로 돌려본결과에서는 노이즈(?) 미출력
<table id="col">
적용시 position:absolute; 인한 크롬, 사파리에서 width값 미적용 문제
<colgroup>을 사용안하고 <td>에 스타일 적용시 사용가능
{overflow:hidden;margin-left:-9999px;width:1px;height:1px;font-size:0;line-height:0}
최신버전 크롬, 사파리 및 lte ie8, 파폭에서도 width값 적용 및 caption 숨김
<colgroup>에 width값 적용시 사파리 미적용 현상 발생
예제소스) http://sirgle.com/caption_sr_test.php 활용
html5
#col {margin-bottom:50px;border-collapse:collapse;border-spacing:0}
#col {margin-bottom:50px;border-collapse:collapse;border-spacing:0}
#col caption{overflow:hidden;margin-left:-9999px;width:1px;height:1px;font-size:0;line-height:0}
<!--[if lte IE 7]>
#col caption{overflow:hidden;margin-left:-9999px;width:1px;height:0px;font-size:0;line-height:0}<!--[if lte IE 7]>
<![endif]-->
ie 6,7 테스터로 돌려본결과에서는 노이즈(?) 미출력
<table id="col">
<caption>테스트용 테이블</caption>
<colgroup>
<col width="50px">
<col width="100px">
<col width="150px">
</colgroup>
<thead>
<tr>
<th>1st header</th>
<th>2nd header</th>
<th>3rd header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
추천
0
0
댓글 1개
이 분도 개발자시군요 .....
글이 이해가 안됨............
개발자의 특징 (자기 머릿속에 있는걸 풀어쓰지 못함 -_-)
글이 이해가 안됨............
개발자의 특징 (자기 머릿속에 있는걸 풀어쓰지 못함 -_-)
