[table] CSS - empty-cells 속성 - 테이블 빈 셀 테두리 표시 여부 (= empty-cells속성 = 엠프티셀스속성/엠프티셀즈속성)

1. empty-cells 예제 - 테이블 빈 셀 테두리 표시 여부
2. empty-cells 정의
3. empty-cells 구문

empty-cells 예제 - 테이블 빈 셀 테두리 표시 여부

 

<style>

td {padding:30px;}

table.hz1 {

  empty-cells: hide;

}

table.hz2 {

  empty-cells: show;

}

</style>

<h2>empty-cells: hide 경우</h2>

<table class="hz1" border="1">

  <tr>

    <td>HTML</td>

    <td>CSS</td>

  </tr>

  <tr>

    <td>JavaScript</td>

    <td></td>

  </tr>

</table>

<h2>empty-cells: show 경우</h2>

<table class="hz2" border="1">

  <tr>

    <td>HTML</td>

    <td>CSS</td>

  </tr>

  <tr>

    <td>JavaScript</td>

    <td></td>

  </tr>

</table>

 

결과보기

empty-cells 정의

 

테이블의 비어있는 셀의 테두리 표시 여부 지정.

 

---

 

1.

border-collapse: collapse 상태에서는 작동 X

 

2.

• 기본값: show
• 적용대상: table 셀 요소들
• 상속여부: O
• 애니가능: X
• CSS버전: CSS2
• JS구문: object.style.emptyCells="hide";

 

3.

IE8 이상 모든 브라우저 지원.

 

4. MDN empty-cells 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/empty-cells

 

empty-cells 구문

 

selector {empty-cells: show|hide|initial|inherit;}

 

---

[매개변수]

 

show

빈 셀의 테두리 표시 O. (기본값)

 

hide

빈 셀의 테두리 표시 X

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.