Detailed analysis of the empty-cells attribute in css table

The

empty-cells attribute in css is supported by all browsers, even IE8. Its usage is as follows:

table {
  empty-cells: hide;}

I guess you have guessed from the semantics It has played its role. It is for HTML table. It tells the browser to hide a table cell when there is nothing in it. In the following demonstration, you can click the button inside, which will switch the attribute value of empty-cells to see how the table display changes.

HTML code

  

    
Fruits
    
Vegetables
    
Rocks
  
  

    

    
Celery
    
Granite
  
  

    
Orange
    

    
Flint
  
  切换EMPTY-CELLS

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

The above is the detailed content of Detailed analysis of the empty-cells attribute in css table. For more information, please follow other related articles on the PHP Chinese website!