首頁 >web前端 >css教學 >css table中empty-cells屬性的具體分析

css table中empty-cells屬性的具體分析

黄舟
黄舟原創
2017-06-30 13:24:241727瀏覽

css裡的empty-cells屬性是所有瀏覽器都支援的,甚至包括IE8,它的用法是下面這個樣子:

table {
  empty-cells: hide;}

估計你從語意上已經猜出它的作用了。它是為HTML table服務的。它會告訴瀏覽器,當一個table單元格里沒有東西時,就隱藏它。下面的示範裡,你可以點擊裡面按鈕,它會切換empty-cells的屬性值,看看table的顯示有什麼變化。

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 table中empty-cells屬性的具體分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn