ホームページ > 記事 > ウェブフロントエンド > CSSテーブルの空セル属性の詳細な分析
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 中国語 Web サイトの他の関連記事を参照してください。