Maison  >  Article  >  interface Web  >  Analyse détaillée de l'attribut cellules vides dans la table CSS

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

黄舟
黄舟original
2017-06-30 13:24:241712parcourir

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(&#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;);
  }};

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn