Css -- about setting the "collapse" value for visibility

1. It may have been usedvisibilityThousands of times, the most commonvisibleAndhiddenUsed to display or hide elements.

The third rarely used value iscollapseIn addition to the differences in table rows and columnshiddenIs equivalent.

Next let's take a look at the table elements,collapseBut the premise is thattableOfborder-collapseSetseparateIt will be effective!

The following is a demo:

The main () code is as follows:

 
 
  
  
  
 
   
 
    
Fruits
 
    
Vegetables
 
    
Rocks
 
   
 
   
 
    
Apple
 
    
Celery
 
    
Granite
 
   
 
   
 
    
Orange
 
    
Cabbage
 
    
Flint
 
   
 
  
 
 

2. The js file is as follows:

var btns = document.getElementsByTagName('button'),    rows = document.getElementsByTagName('tr');btns[0].addEventListener('click', function () {  rows[1].className = 'vc';}, false);btns[1].addEventListener('click', function () {  rows[1].className = 'vh';}, false);btns[2].addEventListener('click', function () {  rows[1].className = '';}, false);

3. the css file is as follows:

body {  text-align: center;  padding-top: 20px;  font-family: Arial, sans-serif;}table {  border-collapse: separate;  border-spacing: 5px;  border: solid 1px black;  width: 500px;  margin: 0 auto;}th, td {  text-align: center;  border: solid 1px black;  padding: 10px;}.vc {  visibility: collapse;}.vh {  visibility: hidden;}button {  margin-top: 5px;}

The default output is:

When you click COLLAPSE ROW1, the following information is displayed:

When you click HIDE ROW1, the following information is displayed:

Although collapse has the feature of hidden, the form of expression is very different from that of hidden. Now you can make a choice based on your own needs.