Semantic-UI Table Collapsing Cell Variation

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. Tables are an easy way to organize a lot of data. A table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis. Tables are useful for various tasks such as presenting text information and numerical data. It can be used to compare two or more items in the tabular form layout. Tables are used to create databases. An HTML table and a Semantic UI table both are the same structurally. In the case of Collapsing Cell Variation, a cell is collapsed so that it only uses as much space as required.

Semantic UI Table Collapsing Cell Variation Classes:

• table: This class creates a table in Semantic UI.
• collapsing: This class collapses a cell to as much space as required.
• celled: This class divides each row of our table into separate cells.

Syntax:

<table class="ui table">
 <tr>
 <td class="collapsing"></td>
 ...
 </tr>
 ...
</table>

Example 1: This is a basic example illustrating the difference between the normal table and Table Collapsing Cell Variation made using Semantic UI.

Output:

👁 Image

Example 2: This is a basic example illustrating Striped Table Collapsing Cell Variation made using Semantic UI.

Output:

👁 Image

Reference: https://semantic-ui.com/collections/table.html#collapsing-cell