display:block 테이블깨짐현상

display 속성은 요소를 어떻게 보여줄지를 결정한다.

주로 4가지 속성값이 쓰이는데, 태그마다 기본값이 다르다.

 

none : 보이지 않음
block : 블록 박스로 만듬
inline : 인라인 박스로 만듬
inline-block : block 박스로 만들어지나, inline 처럼 배치가 된다.

display 속성 중 block (블록 요소) 는 요소의 가로 길이가 100%가 되어 (width값을 수동으로 지정해도 보이지 않는 margin 같은 값이 화면을 꽉 채운다) 자동으로 줄 바꿈이 되고 width, height 속성을 지정 할 수 있는데, 자동으로 display:block 이 적용되는 대표적인 태그는 div 가 있다.

inline 요소는 block 과 달리 줄 바꿈이 되지 않고, width와 height를 지정 할 수 없다. display:inline 이 적용되는 대표적인 태그는 span 이 있다.

inline-block 요소는 inline 요소와 block 요소의 특징을 합친 것으로 자동으로 줄 바꿈이 되지 않지만 크기를 지정 할 수 있다. inline-block 요소와 요소 사이에는 공백이 생기게 된다. (단, ie7 이하는 지원하지 않는데, *zoom:1; *display:inline 속성을 이용하면 inline-block 요소 처럼 사용 할 수 있다.)

 

tr 에 display:block; display:none 의 문제점.

<table>
<tbody><tr style="DISPLAY: block" id="row1">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr style="DISPLAY: block" id="row1">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr style="DISPLAY: none" id="row1">
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody></table>

// 위의 코드는 ie에서는 제대로 작동하지만 표준계열의 브라우저에서는 셀 한칸에 표현이 된다.

표준계열에서는 display:block 가 아니라 display:table-row 를 사용하기 때문인데 그럼 ie와 표준을 구분해서 하면 상당히 까다롭다.

해결법은 의외로 간단하다. display:block에서 block를 주지 않으면 된다. style='display:;' 그냥 비워두면 해결... 이것 때문에 삽질한거 생각하면...

스크립트로 접근시도 동일하다.

obj.style.display='';
obj.style.display='none';

이 두개로 보이고 안보이고를 조절할 수 있다. 둘 다 동일하게 보여진다...