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
Last Updated :
17 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...