ホームページ  >  記事  >  ウェブフロントエンド  >  CSSテーブルの空セル属性の詳細な分析

CSSテーブルの空セル属性の詳細な分析

黄舟
黄舟オリジナル
2017-06-30 13:24:241696ブラウズ

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 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。