<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function hideTr() {
$('#asdf').css('display', 'none');
}
function showTr() {
$('#asdf').css('display', ''); //절대로 block을 써서는 안됨
}
</script>
</head>
<body>
<table border="1" width="700">
<colgroup>
<col width="18%" />
<col width="*" />
</colgroup>
<tbody>
<tr>
<th>제목</th>
<td>내용</td>
</tr>
<tr id="asdf">
<th>제목2</th>
<td>내용2</td>
</tr>
</tbody>
</table>
<input type="button" value="감추기" onclick="hideTr()" />
<input type="button" value="보이기" onclick="showTr()" />
</body>
</html>
위와 같은 코드처럼 tr에 display:none 혹은 display:block 적용 시
제대로 표시가 안되는 문제가 발생한다.
버전이 낮은 ie 에서는 잘 적용이 되는데 표준 계열의 크롬이나 ie11 등에서는 display:block 시에 이상하게 표시가 된다.
이는 표준 계열에서는 display:block이 아니고 display:table-row 를 사용하기 때문인데
이를 표준 계열의 브라우져와 병행하여 처리하기가 많이 까다롭다
해결방법은 간단하다.
display:block 이 아니라 그냥 display: 만 적으면 된다.
block 을 아예 안쓰면 된다.
끝!
※ show(), hide() 함수 이용을 더 권장한다.
'스킬(skills) > HTML' 카테고리의 다른 글
| HTML5 video 태그 ie9 이하 버전에서도 사용하는 방법 (0) | 2017.07.25 |
|---|---|
| [css] 이미지 최대 사이즈 지정 방법 (0) | 2016.07.08 |
| [HTML] favicon(파비콘) 설정 방법 (0) | 2016.05.17 |
| [HTML] 내용이 길어질 경우 점(...) 으로 표시되게 하는 방법 (0) | 2016.04.06 |
| td 줄바꿈 (0) | 2016.01.19 |