Open In App

Semantic-UI Table Fixed Variation

Improve
Improve
Like Article
Like
Save
Share
Report

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>https://www.geeksforgeeks.org/nodejs/</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>https://www.geeksforgeeks.org/c-plus-plus/</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>https://www.geeksforgeeks.org/java/</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

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>https://www.geeksforgeeks.org/nodejs/</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>https://www.geeksforgeeks.org/c-plus-plus/</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>https://www.geeksforgeeks.org/java/</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

Semantic-UI Table Fixed Variation

Reference link: https://semantic-ui.com/collections/table.html#fixed



Last Updated : 17 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads