css의 empty-cells 속성은 IE8을 포함한 모든 브라우저에서 지원됩니다. 사용법은 다음과 같습니다.
table { empty-cells: hide;}
의미론에서 그 역할을 짐작하셨을 것입니다. HTML 테이블용입니다. 테이블 셀에 아무것도 없으면 브라우저에 표 셀을 숨기도록 지시합니다. 다음 데모에서는 내부의 버튼을 클릭하여 빈 셀의 속성 값을 전환하여 테이블 표시가 어떻게 변경되는지 확인할 수 있습니다.
HTML 코드
<table cellspacing="0" id="table"> <tr> <th>Fruits</th> <th>Vegetables</th> <th>Rocks</th> </tr> <tr> <td></td> <td>Celery</td> <td>Granite</td> </tr> <tr> <td>Orange</td> <td></td> <td>Flint</td> </tr></table> <button id="b" data-ec="hide">切换EMPTY-CELLS</button>
CSS 코드
body { text-align: center; padding-top: 20px; font-family: Arial, sans-serif;}table { border: solid 1px black; border-collapse: separate; border-spacing: 5px; width: 500px; margin: 0 auto; empty-cells: hide; background: lightblue;}th, td { text-align: center; border: solid 1px black; padding: 10px;}button { margin-top: 20px;}
js 코드
var b = document.getElementById('b'), t = document.getElementById('table');b.onclick = function () { if (this.getAttribute('data-ec') === 'hide') { t.style.emptyCells = 'show'; this.setAttribute('data-ec', 'show'); } else { t.style.emptyCells = 'hide'; this.setAttribute('data-ec', 'hide'); }};
위 내용은 CSS 테이블의 빈 셀 속성에 대한 자세한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!