>  기사  >  웹 프론트엔드  >  CSS 테이블의 빈 셀 속성에 대한 자세한 분석

CSS 테이블의 빈 셀 속성에 대한 자세한 분석

黄舟
黄舟원래의
2017-06-30 13:24:241710검색

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(&#39;b&#39;),
    t = document.getElementById(&#39;table&#39;);b.onclick = function () {
  if (this.getAttribute(&#39;data-ec&#39;) === &#39;hide&#39;) {
    t.style.emptyCells = &#39;show&#39;;
    this.setAttribute(&#39;data-ec&#39;, &#39;show&#39;);
  } else {
    t.style.emptyCells = &#39;hide&#39;;
    this.setAttribute(&#39;data-ec&#39;, &#39;hide&#39;);
  }};

위 내용은 CSS 테이블의 빈 셀 속성에 대한 자세한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.