Semantic-UI Table Fixed 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 a great way to group a set of similar items into rows and columns. Many Databases such as SQL, Postgresql, etc make use of tables to store data. Semantic UI provided us with a styled table. Let’s have a look at table fixed variation classes.
Semantic UI Table Fixed Variation Classes:
- fixed: This class is used to create a unique table that does not resize the table cells in response to the content.
Syntax:
<table class="ui fixed table">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
Example 1: In the below example, we have created a standard fixed table.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Table Fixed Variation</title> <link href= rel="stylesheet" /> </head> <body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Table Fixed Variation</h4> <hr> <table class="ui fixed table"> <thead> <tr> <th>Language</th> <th>Release Date</th> <th>Link</th> <th>About</th> </tr> </thead> <tbody> <tr> <td>Node.js</td> <td>2009</td> <td>Node.js is an open-source and cross-platform runtime environment built on Chrome's V8 JavaScript engine for executing JavaScript code outside of a browser. </td> </tr> <tr> <td>C++</td> <td>1985</td> <td>C++ is a general purpose programming language and widely used now a days for competitive programming. It has imperative, object-oriented and generic programming features. </td> </tr> <tr> <td>Java</td> <td>1996</td> <td>Java has been one of the most popular programming languages for many years. Java is Object Oriented. However, it is not considered as pure object-oriented as it provides support for primitive data types </td> </tr> </tbody> </table> </div> </body> </html> |
Output:
Semantic-UI Table Fixed Variation
Example 2: In the below example, we have created a single line fixed table.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic UI Table Fixed Variation</title> <link href= rel="stylesheet" /> </head> <body> <div class="ui container"> <h2 class="ui green header">GeeksforGeeks</h2> <h4>Semantic UI Table Fixed Variation</h4> <hr> <table class="ui single line fixed table"> <thead> <tr> <th>Language</th> <th>Release Date</th> <th>Link</th> <th>About</th> </tr> </thead> <tbody> <tr> <td>Node.js</td> <td>2009</td> <td>Node.js is an open-source and cross-platform runtime environment built on Chrome's V8 JavaScript engine for executing JavaScript code outside of a browser. </td> </tr> <tr> <td>C++</td> <td>1985</td> <td>C++ is a general purpose programming language and widely used now a days for competitive programming. It has imperative, object-oriented and generic programming features. </td> </tr> <tr> <td>Java</td> <td>1996</td> <td>Java has been one of the most popular programming languages for many years. Java is Object Oriented. However, it is not considered as pure object-oriented as it provides support for primitive data types </td> </tr> </tbody> </table> </div> </body> </html> |
Output:
Semantic-UI Table Fixed Variation
Reference link: https://semantic-ui.com/collections/table.html#fixed
Please Login to comment...