1. List Item with collapse property
  2. List Item 2
  3. List Item 3
  4. List Item 4
  1. List Item with hidden property
  2. List Item 2
  3. List Item 3
  4. List Item 4
one :heading has no effect on both property
two :
three :
four :
five :
six :
table with collapse property
mom dad
cat dog
book story
table with hidden property
mom dad
cat dog
book story
Exported from Notepad++
<html><head><title>Visibility</title><style> body{ font-family:arial; background: pink; } h6{ padding:1px; margin:1px; } .collme{ visibility:collapse; } .hideme{ visibility:hidden; } /* visibility: visible|hidden|collapse|initial|inherit; */ </style></head><body> <!-- hidden and collapse for list,no effect --> <ol> <li>List Item with collapse property</li> <li class="collme">List Item 2</li> <li>List Item 3</li> <li>List Item 4</li> </ol> <ol> <li>List Item with hidden property</li> <li class="hideme">List Item 2</li> <li>List Item 3</li> <li>List Item 4</li> </ol> <!-- hidden and collapse for headings ,no effect --> <h6>one :heading has no effect on both property</h6> <h6 class="hideme">two :</h6> <h6>three :</h6> <h6 class="collme">four :</h6> <h6>five :</h6> <h6>six :</h6> <ul> <li>List with collapse property</li> <li class="collme">List Item 2</li> <li>List Item 3</li> <li>List Item 4</li> </ul> <!-- hidden and collapse for table --> <table border="1"> <th colspan="2">table with collapse property</th> <tr> <td>mom</td> <td>dad</td> </tr> <tr class="collme"> <!-- whole row collapse --> <td>cat</td> <td>dog</td> </tr> <tr> <td>book</td> <td>story</td> </tr> </table> <table border="1"> <th colspan="2">table with hidden property</th> <tr> <td>mom</td> <td>dad</td> </tr> <tr class="hideme"> <!-- row exists but data removed --> <td>cat</td> <td>dog</td> </tr> <tr> <td>book</td> <td>story</td> </tr> </table> </body> </html>