Detaillierte Analyse des Attributs „leere Zellen“ in der CSS-Tabelle

Das

empty-cells-Attribut in css wird von allen Browsern unterstützt, auch von IE8. Seine Verwendung ist wie folgt:

table {
  empty-cells: hide;}

Ich vermute, Sie haben semantisch bereits erraten, was es bewirkt. Es ist für eine HTML-Tabelle. Es weist den Browser an, eine Tabellenzelle auszublenden, wenn sich darin nichts befindet. In der folgenden Demonstration können Sie auf die Schaltfläche darin klicken, wodurch der Attributwert von empty-cells geändert wird, um zu sehen, wie sich die Tabellenanzeige ändert.

HTML-Code

<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-Code

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-Code

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');
  }};

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse des Attributs „leere Zellen“ in der CSS-Tabelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!