css about visibility setting 'collapse' value problem_html/css

css about visibility setting 'collapse' value problem_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:05:33

Original

1186 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 rarely used value 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 border-collapse of the table needs to be set to separate to have an effect!

Go to the demo directly below:

The main () code is as follows:

<table cellspacing="0" class="table">  <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></table>

Copy after login

2.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);

Copy after login

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

Copy after login

The default output is:

When clicking COLLAPSE ROW1, the display is as follows:

When clicking HIDE ROW1 , displayed as follows:

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