css--About visibility setting 'collapse' value issue-CSS Tutorial-php.cn

css--About visibility setting 'collapse' value issue

高洛峰

Release： 2016-11-24 13:28:14

Original

1554 people have browsed it

1. You may have used visibility thousands of times. The most commonly used ones are visible and hidden, which are used to show or hide elements.

The third value that is rarely used is collapse. Except for the differences in its use in the rows and columns of the table, it has the same effect as hidden.

Let’s take a look at how collapse works in table elements, but the premise is that the table’s border-collapse needs to be set to separate to have an effect!

Go directly to the demo below:

The main () code is as follows:

<table cellspacing="0" class="table">
  <tbody><tr>
    <th>Fruits</th>
    <th>Vegetables</th>
    <th>Rocks</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>Celery</td>
    <td>Granite</td>
  </tr>
  <tr>
    <td>Orange</td>
    <td>Cabbage</td>
    <td>Flint</td>
  </tr>
</tbody></table>

Copy after login

2.js file is as follows:

var btns = document.getElementsByTagName(&#39;button&#39;),
    rows = document.getElementsByTagName(&#39;tr&#39;);
 
btns[0].addEventListener(&#39;click&#39;, function () {
  rows[1].className = &#39;<a href="http://www.php1.cn/">vc</a>&#39;;
}, false);
 
btns[1].addEventListener(&#39;click&#39;, function () {
  rows[1].className = &#39;vh&#39;;
}, false);
 
btns[2].addEventListener(&#39;click&#39;, function () {
  rows[1].className = &#39;&#39;;
}, false);

Copy after login

3. 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;
}

Copy after login

The default output is:

css--About visibility setting collapse value issue

When click COLLAPSE ROW1, the display is as follows:

css--About visibility setting collapse value issue

When you click HIDE ROW1, the display is as follows:

css--About visibility setting collapse value issue

Although collapse has the characteristics of hidden, the form of expression is very different from hidden; now you can according to your own Need, make a choice.