Analyse détaillée de l'attribut cellules vides dans la table CSS

L'attribut

empty-cells en css est pris en charge par tous les navigateurs, même IE8. Son utilisation est la suivante :

table {
  empty-cells: hide;}

Je suppose que vous avez déjà deviné sémantiquement ce qu'il fait. C'est pour le tableau HTML. Il indique au navigateur de masquer une cellule du tableau lorsqu'elle ne contient rien. Dans la démonstration suivante, vous pouvez cliquer sur le bouton à l'intérieur, ce qui changera la valeur d'attribut des cellules vides pour voir comment l'affichage du tableau change.

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

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!